javascript - 构建元素时触发的jQuery更改事件

Question

我正在使用 jQuery 构建一些动态选择列表。当它们发生变化时，我希望事件触发一个函数来刷新数据。

var selector    =   $('<select id="myid" />');
selector.append($('<option value>Option Placeholder</value>'));
// attach onChange event to select list 
selector.bind('change', doUpdate(this));

我的问题是change每次构建选择列表时都会触发该事件。我不确定触发器是如何发生的——我希望它只会change在它发生变化时触发事件！

http://jsfiddle.net/TPuwc/

Answer 1

当你这样做时：

selector.bind('change', doUpdate(this));

您期望发生的是绑定事件处理程序以执行函数，并作为参数doUpdate传递。this

这不是正在发生的事情。相反，它所做的是doUpdate(this)立即调用，然后尝试将该函数调用返回的值设置为事件的事件处理程序change。

你可以简单地做：

selector.bind('change', doUpdate);

jQuery 将为您处理 的值this（它将是触发事件的元素），因此您无需将其作为参数传递给函数。

Answer 2

您必须了解函数调用和函数引用之间的区别。每个回调都应该作为函数引用（或匿名函数）而不是函数调用提供。

()不同之处在于函数名后面的括号。

selector.bind('change', doUpdate);

编辑：一定要更新doUpdate功能。它将自动访问使用this关键字触发更改的元素，因此您无需将其作为参数传递。

Answer 3

您的事件收集方法是错误的。对于事件附件，您应该传递函数。而在这里你正在执行函数并传递返回值。

var selector    =   $('<select id="myid" />');
selector.append($('<option value>Option Placeholder</value>'));
// attach onChange event to select list 
selector.bind('change', function(){ doUpdate(this) });