$（this） 未在 jQuery UI 对话框的“打开”选项中设置

$.widget("ui.dialog", $.ui.dialog, {
  filterWords: function(event) {
    let count = this.options.wordcount;
    console.log(count);
    console.log('we are here!');
    //console.log(this.element);
    let myWords = this.element.find('.words');
    console.log('words:', myWords.length, myWords.html());
    $(this).trigger('open');

    /*
           // the words already filtered and assigned to the dialog's innerHTML
    if ($(this).find('.words').html().length > 1000) {
        return (ev, ui) => {};
    }

    // filter the keys of HASHED dictionary by calling the filterFunc on each
    const filtered = Object.keys(HASHED)
        .filter(word => filterFunc(word))
        .reduce((result, word) => {
            return result + 
                '<p><span class="tile">' + word + '</span> ' + HASHED[word] + '</p>'
        }, '');

    // return the closure expected by the dialog's "open" option
    return (ev, ui) => {
        $(this).html(filtered);
        const title = $(this).dialog('option', 'title');
        console.log(title + ': ' + filtered.length + ' chars');
    };
     */
  }
});


function filterWordsRaw(event, ui) {
  console.log('in RAW form');
  console.log($(this).find('.words').html());
  // the words already filtered and assigned to the dialog's innerHTML
  if ($(this).html().length > 1000) {
    return (ev, ui) => {};
  }
  /* commented out as I do not have HASHED defined 
    // filter the keys of HASHED dictionary by calling the filterFunc on each
    const filtered = Object.keys(HASHED)
      .filter(word => filterFunc(word))
      .reduce((result, word) => {
        return result +
          '<p><span class="tile">' + word + '</span> ' + HASHED[word] + '</p>'
      }, '');

    // return the closure expected by the dialog's "open" option
    return (ev, ui) => {
      $(this).html(filtered);
      const title = $(this).dialog('option', 'title');
      console.log(title + ': ' + filtered.length + ' chars');
    };
    */
}

/* just to show we did this */
function handleOpen(event) {
  console.log('opened');
  console.log(event.target === this);
}

$(".selector").dialog({
  modal: true,
  appendTo: '#fullDiv',
  autoOpen: false,
  open: handleOpen,
  wordcount: 2,
  buttons: {
    'Close': function() {
      $(this).dialog('close');
    }
  }
});

$(".selector").on("dialogopen", filterWordsRaw);

$('.go-do-it').on('click', function(event) {
  console.log('hi');
  $(".selector").dialog("filterWords");
});

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">
<div class="container">
  <button type="button" class="go-do-it">Click</button>
</div>

<div class="selector" title="Dialog Title">
  <span class="words">one fish two fish red fish blue fish</span>
</div>
<div id="fullDiv"></div>

'use strict';

const HASHED = {
  "one": "Word description 1",
  "two": "Word description 2",
  "three": "Word description 3",
  "four": "Word description 4",
  "five": "Word description 5",
  "six": "Word description 6",
  "seven": "Word description 7"
};
jQuery(function($) {
  function filterFunc(word, len) {
    //console.log(word, len, word.length == len);
    return word.length == len;
  }
  $('.my-letter-dialog')
    .on("dialogopen", function(event, ui) {
      let elWLen = $(this).data('wordlength');
      let wordLen = !!elWLen ? elWLen : $(this).dialog("option", "wordLength");
      console.log(wordLen);
      if ($(this).html().length > 1000) {
        return (ev, ui) => {};
      }
      const filtered = Object.keys(HASHED)
        .filter(word => filterFunc(word, wordLen))
        .reduce((result, word) => {
          return `${result}<p>${word}:${HASHED[word]}</p>`
        }, '');
      //console.log('filtered:', filtered)
      $(this).html(filtered);
      const title = $(this).dialog('option', 'title');
      const newTitle = `${title}:${filtered.length} chars`;
      $(this).dialog('option', 'title', newTitle);
    })
    .dialog({
      modal: true,
      autoOpen: false,
      wordLength: 3,
      filterFunc: filterFunc
    });

  $('.my-letter-button').button()
    .on("click", function(ev) {
      const targ = $(this).data('targetselector');
      $(targ).dialog('open');
    });
});

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1/dist/themes/redmond/jquery-ui.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1/dist/jquery-ui.min.js"></script>

<!-- beware: the twoDlg will be empty -->
<div class="my-letter-dialog" id="twoDlg" data-wordlength="2" title="2 letters"></div>
<div class="my-letter-dialog" id="threeDlg" title="3 letters"></div>
<div class="my-letter-dialog" id="fourDlg" data-wordlength="4" title="4 letters"></div>

<button class="my-letter-button" type="button" id="twoBtn" data-targetselector="#twoDlg">2 letters</button>
<button class="my-letter-button" type="button" id="threeBtn" data-targetselector="#threeDlg">3 letters</button>
<button class="my-letter-button" type="button" id="fourBtn" data-targetselector="#fourDlg">4 letters</button>