Question

我在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）都是在某些点动态添加的，它们由几行组成，每行有几个文本输入。代码的意图是，无论哪一行的最后一个输入被模糊，都要聚焦（）最后一行的第一个输入。

通过控制台应用时可以正常工作，但不能通过onload工作，所以我知道它与冒泡有关。我试图像这样添加“文档”......

$.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()
    })
})

...泡到足够远的地方，但这在控制台或onload中都不起作用 - 我假设因为“.each（）”而不是“.each”中给定上下文的一部分。

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

修改：添加了jsfiddle工作代码。如果表是动态添加的，那么它将不起作用。

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

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

Answer 1

我认为这与事件委派有关，因为在您调用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();
});

Answer 2

试试这个

$.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()
    })
})

未经我方测试，您可以尝试..

当.on事件在嵌套函数内时，Jquery事件冒泡

2 个答案: