时间戳

首页 > 解决方案 > 单击 ajax 发布请求无法按预期单击两个表中的单元格

javascript - 单击 ajax 发布请求无法按预期单击两个表中的单元格

问题描述

使用以下代码捕获表格 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
});

阿贾克斯功能：

$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 函数，它在这两种情况下都可以正常工作。

有什么建议么？

标签： javascriptjqueryajax

解决方案

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

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

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

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

而不是使用 $("td").click(function ()，使用$(document).on("click", "td", function () {

推荐阅读