jquery - jquery 委托(delegate)和更改事件的问题

Question

我想在文件更改事件中使用委托(delegate)函数，但我没有任何运气。这是我正在尝试做的事情:

$("#file").delegate("change", function() {    
    $("#submit_form").trigger('click');
});

我的更改事件没有被调用...我是否遗漏了某些内容，或者我不能在更改事件中使用委托(delegate)吗？

Answer 1

.delegate() 需要一个代表目标元素的选择器。

$("#file").delegate('.selector_of_element_to_watch', "change", function() {    
    $("#submit_form").trigger('click');
});

如果 #file 元素是应该触发更改事件的元素，则不要使用 .delegate。

$("#file").bind("change", function() {    
    $("#submit_form").trigger('click');
});

<小时/>

这样做的原因是，委托(delegate)处理程序被放置在应触发事件的元素的祖先上。然后，您提供该元素的选择器。

页面上的事件冒泡。这意味着事件将从实际触发事件的元素一直传播到窗口，并尝试在沿途的每个元素上触发处理程序。

当到达绑定(bind)委托(delegate)处理程序的祖先时，它将测试事件以查看最初触发事件的元素是否与选择器匹配。如果是这样，它将运行您的代码。如果没有，什么也不会发生。

<小时/>

在 jQuery 1.7 或更高版本中进行事件委托(delegate)的方法是使用 on 方法。

此方法允许您直接绑定(bind)到元素或提供用于委托(delegate)的选择器。

对于授权来说:

$("#file").on( "change", '.selector_of_element_to_watch', function() {
      // Run if a descendant of '#file' that matches the selector
      //    '.selector_of_element_to_watch' triggered the event
    $("#submit_form").trigger('click');
});

或者直接绑定(bind):

$("#file").on( "change", function() {
      // Run if '#file' itself, or ANY of its descendants triggered the event
    $("#submit_form").trigger('click');
});

(不知道元素 #file 是什么类型，它可能没有/不能'有后代。如果是这样的话，那么显然事件委托(delegate)不是正确的解决方案。)

这比他们的旧 API bind/live/delegate 有了很大的改进，而且从一开始就应该是这样做的。