Question

我有一个用户网格，我可以为该网格添加新用户。因为这就是我正在做的事情，当我拿起删除行事件时，我必须使用jquery委托将事件附加到上下文而不是页面。今天我们应该用delegate替换on。在下面的两个函数中，只有委托版本捕获了删除按钮的单击事件。这是为什么？

//不起作用

$(".removeRow").on("click", function () {
    var $this = $(this);
    var $row = $this.closest("tr");
    var username = $row.data("msurvey-username");
    var url = GetHiddenField("msurvey-remove-employee");
    dataService.removeEmployee(username, $row, removeEmployeeFromGrid, url);
});

//不起作用

$("body").on(".removeRow", "click", function () {
    var $this = $(this);
    var $row = $this.closest("tr");
    var username = $row.data("msurvey-username");
    var url = GetHiddenField("msurvey-remove-employee");
    dataService.removeEmployee(username, $row, removeEmployeeFromGrid, url);
});

//这确实有效

$("body").delegate(".removeRow", "click", function () {
    var $this = $(this);
    var $row = $this.closest("tr");
    var username = $row.data("msurvey-username");
    var url = GetHiddenField("msurvey-remove-employee");
    dataService.removeEmployee(username, $row, removeEmployeeFromGrid, url);
});

Answer 1

对于.on() event-delegation使用此代码：

$(document).on("click", '.removeRow',function () {
    //Your code ...
});

注意：

尽量避免使用body进行绑定，因为可能会出现错误
建议使用最近的静态父级而不是document

Answer 2

使用Event Delegation委托事件方法.on()的正确语法是。

即

$(document).on('event','selector',callback_function)

因此，将事件绑定调用更改为

$(document).on("click", ".removeRow", function () {
    //Your code
});

为了获得更好的性能，您应该使用最接近的静态容器而不是document。

Answer 3

您可以使用：

$(parentSelector).on('click', 'elementSelector', function() {
    // Handler Code here
});

parentSelector是elementSelector的常见和静态父项。与作为parentSelector的document相比，这将更快。

用事件

3 个答案: