Question

使用以下代码捕获表ID和单元格文本。

$("td").click(function(e) {
    var $row =$(e.target).closest("td");   // Find the row
    var $table_label= $row.text();
    //alert($table_label);
    var $table_id=$(this).closest("table").attr('id');
    if($(this).attr('style'))
    $(this).removeAttr('style');
      else
    $(this).css('background', '#309');



   tableText($table_label,$table_id); //this is ajax function
});

Ajax函数：

$test_table1 = $('.test_table1')
$test_table2 = $('.test_table2')
function tableText(table_label,table_id) {
      $.ajax({
        type: 'POST',
        url: url,
        contentType: 'application/json',
        data: JSON.stringify({'label':'table', 'filter':{'table_id':table_id,'table_label':table_label}}),
        success: function(res, status, xhr){
            $test_table1.html(res['table1']);
            $test_table2.html(res['table2']);
        },
    });
    }

当我直接单击table2时，它正在工作。当我单击table1之后，然后在table2中单击时，它不起作用。如果我删除了ajax函数，则在两种情况下都可以正常工作。

有什么建议吗？

Answer 1

$("td").click(function () {仅将事件绑定到DOM中存在的a元素。

$(document).on("click", "td", function () {会将事件绑定到绑定事件发生时不存在的a元素上。这称为事件委托。

事件委托允许我们将单个事件侦听器附加到父元素，它将为所有与a匹配的后代触发选择器，无论这些后代现在存在还是被添加到未来。

根据您的ajax响应，将tr和td绑定到元素后添加到DOM中。

使用$("td").click(function ()代替使用$(document).on("click", "td", function () {

在单击ajax发布请求不能按预期工作在两个表中的单元格上

1 个答案: