在ajax調用中附加tbody后點擊事件不起作用？

Question

我正在使用帶有 jquery 的 php 和 mysql 來顯示我的數據。 我on點擊事件的初始時間是在tbody on工作。

但是當我用 ajax 調用附加 tbody 時，它不起作用。 我正在使用帶有.on事件委托

我的 html 表：我使用簡單的 html 表來顯示我的數據和任何 TD 添加 ajax 以附加數據的 onclick。

 <table id="NewsTable" class="display" width="100%" cellspacing="0">
            <thead>
                <tr> 
                    <th class="th-sm">Headline</th>
                    <th class="th-sm">Main Category</th>
                </tr>
            </thead>
            <tbody>
                foreach($data as $val){ // php data foreach loop.(ignore)
                      <tr class='".$x++."className'> // using dynamic class name and id everywhere.
                  <td  class='".$x++."className1'><?php echo $val['data1']?></td>
                  <td  class='".$x++."className2'><?php echo $val['data2']?></td>
                </tr>
                }
            </tbody>
        <table>

我的 ajax 調用：

$('#NewsTable').on('click','td', function(e) {
            e.preventDefault();
             $.ajax({
                type: "POST",
                url: 'ajax.php',
                data: 'data',
                beforeSend: function() {
                    $('#loader').show();
                },
                success: function(response) {
                    $('#NewsTable tbody').empty();
                    $('#NewsTable tbody').append(response); // data is coming properly here. but Now on click event not working.
                },
                error: function(xhr, status, error) {
                    console.log(error);
                },
            });
});
   

Answer 1

嘗試更改選擇器以定位文檔，如下所示：

$(document).on('click','#NewsTable td', function(e) {
            e.preventDefault();
             $.ajax({
                type: "POST",
                url: 'ajax.php',
                data: 'data',
                beforeSend: function() {
                    $('#loader').show();
                },
                success: function(response) {
                    $('#NewsTable tbody').empty();
                    $('#NewsTable tbody').append(response); // data is coming properly here. but Now on click event not working.
                },
                error: function(xhr, status, error) {
                    console.log(error);
                },
            });
});

此代碼$('#NewsTable tbody').empty(); 正在刪除附加了偵聽器的元素，因此新元素在附加后沒有點擊偵聽器。