jQuery 1.7+中的实时事件

Live events in jQuery 1.7+

本文关键字：实时 事件 jQuery      更新时间：2023-09-26

我正试图对未来的DOM元素使用on方法，但由于某种原因，它不是在单击时调用事件，而是在动态创建DOM对象时激发事件。

这是我的密码。

$("#checkbox1").on('click', toggleChecked(this.checked)); //this is included in Ajax call success method

function toggleChecked(status) {
    $(".item").each(function () {
        $(this).prop("checked", status);
    });
}

我在这里做错了什么？

toggleChecked(this.checked)将立即执行该函数，然后on将获得其返回值作为未定义的处理程序。

将其包装为一个匿名函数，以便在选中复选框click时调用它。

$("#checkbox1").on('click', function(){
   toggleChecked(this.checked)
});

如果直接使用toggelChecked方法作为click处理程序，则可以在处理程序中使用`this.checked获取复选框的checked状态。

两个问题：

  • 通过添加括号，在执行函数时，必须将对函数的引用传递给.on（）

  • 您不能像想要的那样传递参数。但是事件处理程序中的this将是单击的DOMElement，因此您可以使用this.checked 获取其中的checked属性值

这是一个修改后的代码：

$("#checkbox1").on('click', toggleChecked);

function toggleChecked() {
    // "this" here is the clicked element
    var status = this.checked;
    $(".item").each(function () {
        // be careful in .each() 'this' is the currently iterated element
        $(this).prop("checked", status);
    });
}

您必须将事件侦听器放入函数文本中。否则，将直接调用该函数。

$("#checkbox1").on('click', function() {
    toggleChecked(this.checked);
});

函数本身可以更有效地编写：

function toggleChecked(status) {
    $(".item").prop("checked", status);
}

正如人们所指出的，你做的函数是错误的（函数必须是匿名函数或指向函数的指针，或是指向函数的字符串）。但你也使用了错误的"on"方法，它与"live"方法不完全相同。你观察文档（或文档的一个区域），并在其中有一个子选择器。

$(document).on('click', "#checkbox1", function() {
    var status = this.checked;
    $(".item").each(function () {
        $(this).prop("checked", status);
});

注意：如果你所有的复选框都是在"checkBoxDiv"中创建的，你的选择器可以是：

$("#checkBoxDiv").on('click', "#checkbox1", ...

有关如何使用"on"的更多信息，请参阅"live"文档中的函数比较（约占页面下方的1/3）。

来自文件：

根据其继承者重写.live（）方法是直截了当的这些模板用于对所有三种事件附加方法：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery
1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+

events参数可以是以空格分隔的事件类型列表名称和可选名称空间，或事件名称字符串的事件映射和处理程序。数据参数是可选的，可以省略。对于例如，以下三个方法调用在功能上是等效的（但请参阅以下内容，了解更有效、更高效的连接方式委托的事件处理程序）：

$("a.offsite").live("click", function(){ alert("Goodbye!"); });                // jQuery 1.3+    
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); });  // jQuery 1.4.3+ 
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });        // jQuery 1.7+
相关文章：