jQuery，将自定义函数绑定(bind)到 DOM 元素

Question

我的应用程序中有两个 div，我希望它们具有具有相同签名但具有不同操作的自定义函数，这样我就可以将“当前”div 存储在变量中，然后调用类似以下内容的函数:

myCurrentDiv.theFunction(someEventData);

并启动相应的方法。

如何使用 jQuery 做到这一点？

我尝试做类似的事情:

$("#myFirstDiv").theFunction = function() {
    alert("theFunction on firstDiv");
}
$("#mySecondDiv").theFunction = function() {
    alert("theFunction on secondDiv");
}

Answer 1

jQuery 的哲学与你想要的相反:jQuery 不会用新的属性或方法扩展任何现有的类型/对象；它在其内部实现了所有内容。

但是如果你想用 jQuery 来实现，你有几种不同的方法:

1. JavaScript方式:

   $("#mySecondDiv")[0].theFunction = function(a, b) { /* ... */ }
   

2. jQuery.data:

   $("#mySecondDiv").data({ theFunction: function(a, b) { /* ... */ } });
   $("#mySecondDiv").data("theFunction")(1, 2)
   

3. 自定义事件:

   $("#mySecondDiv").bind('my-event', function(event, a ,b) { /* ... */ });
   $("#mySecondDiv").trigger('my-event', [1, 2]);