jquery - 如何为我自己的函数迭代的每个元素绑定(bind)一个函数？

Question

基本上，如果这是我的代码:

jQuery.fn.createSelector = function(){
   return this.hide()
   .after('<div class="newElement"></div>');
   // bind'em !
   $(".newElement").click(function(){
      alert('test');
   });
};

该函数返回元素(将其插入 HTML)，但不绑定(bind)其上的点击事件。我需要在我的函数插入的每个元素上绑定(bind)各种事件，但我不知道如何:(谷歌也没有真正帮助。

提前致谢!

Answer 1

您将在执行绑定(bind)之前返回。只需重新排列即可:

var $newElement = $('<div class="newElement"></div>');
$newElement.click(yourFunc);
return this.hide().after($newElement);

您当前的代码还有另一个潜在的问题:它将点击事件绑定(bind)到页面上的每个 .newElement，因此每次调用它时，所有先前创建的.newElements 将再次绑定(bind)。这可能是您想要做的，但它看起来很不寻常，所以我想我会提到它。

也许有一种更简单的方法可以做到这一点。查看 jQuery 的 live功能。可能不适用于所有情况，但它可以提供很大的帮助。您不必每次创建 .newElement 时都进行绑定(bind)，只需说“所有 .newElements 在单击它们时都应执行此代码”。获胜的声明式事件绑定(bind):

//Put this somewhere in your init function (or wherever)
$('.newElement').live('click', function()
{
    alert("Neat stuff");
});

然后你的 createSelector 主体将是:

return this.hide().after('<div class="newElement"></div>');

事件会自动、被动地“绑定(bind)”到它。