Question

我正在创建一个动态表系统，可以通过在行为空时更改行来添加行。我的问题是新添加的行是＆＃34;隐形＆＃34;到我的事件处理程序。这些是我的事件处理程序：

$('tr td ').on('blur', 'input.autoupdate',function(event){
    event.stopPropagation();
    event.preventDefault();
    rid = $(this).closest('tr').attr('id');
});

$('tr td ').on('focus', 'input.autoupdate',function(e){
    e.stopPropagation();
    e.preventDefault();
    newid = $(this).closest('tr').attr('id');
    check();
});

这是我添加行的功能：

  var table_row = "<tr><td><input></td></tr>";
  $(table_row).appendTo('#auto_insert');

谁能告诉我我做错了什么？

Answer 1

这将解决你的问题：

$(document).on('blur', 'tr td input.autoupdate',function(event){
     event.stopPropagation();
     event.preventDefault();
     rid = $(this).closest('tr').attr('id');
});
$(document).on('focus', 'tr td input.autoupdate',function(e){
     e.stopPropagation();
     e.preventDefault();
     newid = $(this).closest('tr').attr('id');
     check();
});

问题是：

你的trs和tds是动态添加的，因此他们没有事件监听器监听它们上发生的事件，这就是你如何在动态添加的元素上设置事件监听器。

Answer 2

由于DOM无法识别页面上新添加的元素

$(document).on('blur', 'tr td input.autoupdate',function(event){
 event.stopPropagation();
 event.preventDefault();
 rid = $(this).closest('tr').attr('id');
});

$(document).on('focus', 'tr td input.autoupdate',function(e){
 e.stopPropagation();
 e.preventDefault();
 newid = $(this).closest('tr').attr('id');
 check();
});

Answer 3

您只将事件处理程序绑定到现有<tr>和<td>。它不会为新的工作而工作，因为当你的脚本运行时它们不存在。

您需要将事件处理程序绑定到目前DOM中存在的元素。将处理程序绑定到<table>，例如

$('table').on('blur', 'tr td input.autoupdate',function(event){

Answer 4

您正在使用委派事件，这是正确的，但是您需要使主选择器成为DOM加载时可用的元素，而tr td元素不是。请尝试绑定到table元素：

$('table')
    .on('blur', 'input.autoupdate', function(event) {
        // your code...
    })
    .on('focus', 'input.autoupdate', function(e) {
        // your code...
    });

有谁知道为什么我的jquery不会在我的html表中找到新插入的行？

4 个答案: