当 .on 事件位于嵌套函数中时，Jquery 事件冒泡

Jquery event bubbling when .on event is within a nested function

本文关键字：事件 函数 Jquery 嵌套 on 于嵌套      更新时间：2023-09-26

我在body onload事件中有以下代码：

$.each(["#tbl_p2", "#tbl_p5", "#tbl_ukalk"], function(index,value){
    $("tbody tr:not(:last)", value).find("input[type='text']:visible:last").on("blur", this, function(){
        $("tbody tr:last input[type='text']:first", value).focus()
    })
})

上述表（tbl_p2、tbl_p5 和 tbl_ukalk）都是在某个时候动态添加的，它们由几行组成，每行有几个文本输入。代码的目的是在每行的最后一个输入模糊时聚焦（）最后一行的第一个输入。

当通过控制台应用时它可以工作，但不能通过加载，所以我知道它与冒泡有关。我尝试像这样添加"文档"...

$.each(["#tbl_p2", "#tbl_p5", "#tbl_ukalk"], function(index,value){
    $("document tbody tr:not(:last)", value).find("input[type='text']:visible:last").on("blur", this, function(){
        $("tbody tr:last input[type='text']:first", value).focus()
    })
})

。冒泡得足够远，但这在控制台或加载中都不起作用 - 我假设是因为"文档"不是 $.each（） 中给定上下文的一部分。

我也尝试做$.each(["document #tbl_p2", ...])但这也不起作用。

编辑：添加了带有工作代码的jsfiddle。如果表是动态添加的，则不起作用。

编辑 II：使用动态添加的表更新了 jsfiddle，用于显示事件侦听器不会更新到新的表元素。

编辑三：100%工作jsfiddle，非常感谢@Rob Schmuecker（见接受的答案）

我认为这与事件委派有关，因为在您调用onload时表尚未加载？

查看此处 http://api.jquery.com/on/有关委派事件的信息。您可能需要稍微重新格式化代码才能使其正常工作。

或者，仅当表实际加载到 DOM 中时（例如在 ajax 请求的success回调或类似情况下），才调用代码。

编辑：这是一个正确的工作小提琴 http://jsfiddle.net/7UTBQ/3/这是正确的工作JavaScript

.JS：

$(document).on("blur", "table tr:not(tr:last-child) td:last-child input[type='text']:visible", function (event) {
    console.log('blur');
    $("tr:last input[type='text']:first", $(event.target).parents('table').get(0)).focus();
});

试试这个

$.each(["#tbl_p2", "#tbl_p5", "#tbl_ukalk"], function(index,value){
    $("document tbody tr:not(:last) "+value).find("input[type='text']:visible:last").on("blur", this, function(){
        $("tbody tr:last input[type='text']:first "+value).focus()
    })
})

没有经过我这边的测试，你可以试试。.

相关文章：