使用 jQuery 将函数延迟绑定到多个事件答案

【问题标题】：Lazy binding functions to multiple events with jQuery使用 jQuery 将函数延迟绑定到多个事件
【发布时间】：2010-09-28 14:48:54
【问题描述】：

以下是场景：我有一组按钮，我想在单击时绑定到相应的功能。这些按钮的 id 与其对应功能的名称相同。我可以这样做：

$("#kick").click(kick);
$("#push").click(push);
$("#shove").click(shove);

但我很懒，想更懒地做这件事（这就是我的本性）。由于按钮都包含在块元素中，我想做这样的事情：

$("#button_holder > span").each(function () {
    var doThis = this.id;
    $(this).click(doThis);
});

除非那不起作用。有什么建议吗？

【问题讨论】：

标签： jquery events dynamic bind

【解决方案1】：

像其他回答者一样，我不确定这是“真正的”懒惰（就像程序员的美德一样），但只有你知道你的实现细节。

如果你真的想做这样的事情，你可以使用一个对象来存储你的特定函数，然后使用字符串来查找它们：

var myFunction = {
     kick:  kick,
     push:  push,
     shove: shove
};

$("#button_holder > span").each(function () {
    var doThis = this.id;
    $(this).click(myFunction[doThis]);
});

或者作为匿名函数：

var myFunction = {
     kick:  function() { /*do kick  */ },
     push:  function() { /*do push  */ },
     shove: function() { /*do shove */ }
};

$("#button_holder > span").each(function () {
    var doThis = this.id;
    $(this).click(myFunction[doThis]);
});

【讨论】：

感谢您的想法，这两个想法都对我有用。我认为这是适当的懒惰，因为它减少了我需要做的重复/工作量来添加具有相关事件的新按钮，但可以肯定的是，这是有争议的。再次感谢。

【解决方案2】：

$("#button_holder > span").each(function () {
    var doThis = this.id;
    $(this).click(function(doThis){
      alert(doThis);
    });
});

【讨论】：

我认为这行不通；它将匿名函数绑定到事件。

【解决方案3】：

<input type="submit" id="kick" value="Kick Me">
<input type="submit" id="push" value="Push Me">

<script type="text/javascript>
$(function() {
    $("input[type=submit]").each(function () {
        var doThis = this.id;
        $(this).click(doThis);
    });
});
</script>

【讨论】：

这给了我相同的最终结果，只是选择绑定的元素的方式发生了变化，据我所知。

【解决方案4】：

我想我不明白这一点。无论如何，您都需要单独创建每个函数，而这种编程对于其他人来说通常很难理解。也许如果你有几十个按钮并且它是一次性代码，我可以理解但..可能不是......

为什么不直接将所有绑定到单个函数并在事件时根据 this.id 做出决定？？

【讨论】：

我发现说“这个 div 的子 span 都将有自己的函数，并且函数的名称将与 span 的 id 相同”这样的说法更具可读性和可重用性。这是美学问题，IMO。

【解决方案5】：

它非常简单！您尝试将 none-function 传递给 click 方法。

var doThis = this.id;
$(this).click(doThis);

你需要传递一个函数：

 $(this).click(function(doThis){
      alert(doThis);

});

或：

function myFunc(){};
$(this).click(myFunc);

【讨论】：