是否可以触发/绑定 jQuery UI 事件？ [复制]答案

【问题标题】：Is it possible to trigger / bind a jQuery UI event? [duplicate]是否可以触发/绑定 jQuery UI 事件？ [复制]
【发布时间】：2012-11-08 16:39:12
【问题描述】：

可能重复：
jQuery AutoComplete Trigger Change Event

我正在使用 jQuery UI v1.9 并成功实现了 jQuery UI Autocomplete 小部件。我想知道是否可以触发/绑定 jQuery UI 事件，如果可以，如何实现。也就是说，例如，如果我有

$('#autocomplete_field" %>').autocomplete({
  change: function (event, ui) {
    // Make something...
  },
  minLength: 2,
  ...
});

是否可以通过将 jQuery UI change 事件绑定到 keypress 事件来运行它？

注意：我试过了

$('#autocomplete_field').bind('keypress', function(event) {
    $('#autocomplete_field').autocomplete('option', 'change').call();
});

但我收到以下错误（来自 Firebug 控制台）：

TypeError: elem.nodeName is undefined
...ks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase(...

【问题讨论】：

IIRC 每个 jQuery UI 小部件的事件都以小部件名称为前缀。
为什么你用$作为一个选择器，而$jQ作为另一个选择器？
@zzzzBov - 我不明白你的意思（BTW：什么是 IIRC？！）。你能说得更清楚些吗？
@wirey - 我更新了这个问题。我的错。
您是否意识到，只要文本框发生更改，自动完成功能就会触发？？

标签： javascript jquery jquery-ui events callback

【解决方案1】：

这将包括文本框的自动完成：

  $(".autoCompleteTxtBox").autocomplete({
                 source: "www.url.com/Source",
                 select: function (event, ui) {
                     //something to do when user selects from dropdown
                 }
             });



 $(document).on('keyup, keydown, change', '.selectorClass', function(event){    
       //I'm not sure what you need ui for exactly
      var pos = $(this).position(); // gets position of .selectorClass
      var val = $(this).val(); // gets current value of .selectorClass
      var width = $(this).width(); // gets width
     // if there are multiple '.selectorClass' - $(this) is the one that fired event
   });

这是否让您了解如何使用 $(this)？

在同一文本框的 2 个位置处理事件有点多余，但如果这是您想要的 - 这将有一个正常工作的自动完成功能，并且无论文本框如何更改，每次更改文本框时都有另一个处理位置。

【讨论】：

我尝试了您的代码，但似乎 not 每次更改文本框时都会触发 change 事件（在您的示例中，在 keyup、keydown 上， ... 事件）。
@Backo - 已编辑 - 应该为您涵盖所有内容
实际使用.on() - 编辑答案，1.9版本可以处理.on()
我必须将 event 和 ui 参数传递给 function()，以及用于 jQuery UI 的 change 事件。是否可以使用您的代码？
function(event) 肯定会起作用，function(event, ui) 应该起作用，你也可以随时使用 $(this)

【解决方案2】：

我认为，如果您只是将功能从自动完成中抽象出来，那将很容易。

$('#autocomplete_field" %>').autocomplete({
    change: function (event, ui) {
        changeFunction()
    },
    minLength: 2,
          ...
});

$('#autocomplete_field').bind('keypress', function(event) {
    changeFunction();
});

function changeFunction() {
//make something
}

【讨论】：

如何将event、ui 参数从$('#autocomplete_field').bind('keypress', function(event) { changeFunction(); }); 传递给changeFunction() 函数？
编辑 changefunction 让它接受参数，所以 function changeFunction(event, ui) { //make something }。然后用 changeFunction(event, ui) 调用它。

【解决方案3】：

在快速查看jQuery UI source 之后，我最初的猜测大部分是正确的（我已经有一段时间没有使用任何 jQuery UI 小部件了）。

autocomplete 等使用jQuery.Widget 构建器，它会在任何以小部件名称调用的事件前加前缀（或widgetEventPrefix，如果提供的话）。

对于autocomplete，这意味着事件应该可以通过autocompletechange、autocompleteclose等触发和绑定（您可以在autocomplete widget's documentation page上找到其余事件）

【讨论】：