用on事件替换委托

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()使用:

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

笔记:

1. 尽量避免使用body绑定,因为可能会出现错误
2. 建议使用最近的静态父代替 document

Answer 2

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

即

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

所以将事件绑定调用更改为

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

为了获得更好的性能,你应该用最接近静态容器代替document.