javascript - 将函数与对象绑定(bind)到 jQuery 'change' 事件处理程序

Question

当您通过 onChange 在 DOM 中指定函数(带或不带参数)时，您只能使用静态参数。例如

<select id="blah" onChange="doSomething(3);">

但是，jQuery 允许您动态定义函数并将其分配给事件处理程序，例如“更改”。

请参阅下面的示例:

function addRow(customObject) {
  << Create TR containing a select named "#someSelect + customObject.id" >>

  // Demo
  $("#someSelect" + customObject.id).change(function() {
    changeSomething(customObject)
  });
}

我的问题是 - 本质上 - 这会起作用吗？我正在使用一个特定的实例of 我的 jQuery 更改事件处理程序中的一个对象。 customObject 的特定实例(无论它位于何处)是否始终绑定(bind)到此事件处理程序回调？

customObject 在加载时初始化，并且是众多对象之一。对于那个特定的选择框，我总是希望它链接到该对象。

jQuery 新手。提前致谢。

编辑:

我有几行项目。每个都由一个对象表示。我只是想确保当有人通过 HTML 修改其中一行时，底层对象(绑定(bind)到回调函数)已正确更新。

我正在寻找这样的东西，概念上是以下之间的映射:

Row 1 - customObject1
Row 2 - customObject2
Row 3 - customObject3

...这样，如果我修改第 3 行中的一个 HTML 元素(例如更改选择框)，那么在幕后，customObject3 就会被修改

Answer 1

如果在添加监听器之前定义了 customObject.id，并且您希望监听器本身绑定(bind)到该特定元素而不移动它，那么您所拥有的将起作用。

根据您的问题，我了解到 customObject.id 是动态的，因为可以更改其值，并且根据该值，监听器可以监听不同的元素。在这种情况下，您必须使用更通用的选择器并检查监听器本身内部的值:

$('select').on('change', function(e) {
    if(this.id === 'someSelect' + customObject.id)
        return myCallback(e);
});

编辑:

问题在于访问监听器内的customObject。它使用当前内容，而不是添加监听器时所使用的内容。

我知道的最简单的解决方案是:

var select = $("#someSelect" + customObject.id);
select.customObject = customObject; /* save customObject to the select itself */
select.on('change', function() {
    changeSomething(this.customObject); /* don't use global object but its own */
});