jQuery与对象的绑定函数'事件处理程序

binding functions with objects to jQuery 'change' event handler

本文关键字：事件处理 程序 函数 对象 绑定 jQuery      更新时间：2023-09-26

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

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

然而，jQuery允许你动态地定义和分配函数给事件处理程序，比如'change'。

请看下面的例子:

function addRow(customObject) {
  << Create TR containing a select named "#someSelect + customObject.id" >>
  // Demo
  $("#someSelect" + customObject.id).change(function() {
    changeSomething(customObject)
  });
}

我的问题是——本质上——这能行吗?我使用一个特定的实例0在我的jQuery更改事件处理程序中的一个对象。customObject的特定实例(无论它位于何处)是否总是绑定到此事件处理程序回调?

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

jQuery新功能。提前谢谢。

编辑:

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

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

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

…这样，如果我修改第3行中的一个HTML元素(例如改变选择框)，在幕后，customObject3被修改

如果在添加侦听器之前定义了customObject.id，并且您打算将侦听器本身绑定到特定元素而不移动它，则可以使用

。

从你的问题中我了解到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 */
});
相关文章：