在 ajax 响应元素上触发 JQuery 事件

Question

我的代码点火器项目中的事件触发有问题。我想在我的页面中动态加载一个表。此表通过 ajax 调用从我的控制器返回。我想在该表中的跨度中触发一个点击事件。我以多种方式尝试过，但它不起作用。我在这里附加我的代码。请帮我找到解决方案。

控制器：

$str = '<table>
         <tr>
            <td class="cost date" id="date_'.$request['SupplyID'].'">
               <span class="editable" style="display: none;">
                  <input type="text" class="expiry" autocomplete="off" data-date-id="date_'.$request['SMSSupplyID'].'">                                    
               </span>
               <span class="cnt" style="display: inline;">Choose</span>
            </td>
          </tr>
       </table>';
echo $str;

视图中的脚本：

function loadmore()
    {
        var url;
        url =  '/SMS/SMS/loadMoreRequests';
        $.ajax({
            type: 'post',
            url: url,
            data: {
                limit:val
            },
            success: function (response) { console.log(response);
                $("#requestListTable").html(response); 
                val +=10;
            }
        });
    }
$('.date').find('.cnt').on('click', function(){ 
    console.log(1);       // for testing
});

我尝试了以下更改，但没有用

1）

$('.date').find('.cnt').live('click', function(){ 
    console.log(1);       // for testing
});

2）

$('.date').find('.cnt').click(function(){ 
    console.log(1);       // for testing
});

Answer 1

$("container for the table").on("click", ".cnt", function() {

});

为此，可以使用事件委派。将事件绑定到文档就绪文档上的 dom 上存在的父元素。或者你可以简单地使用，

$("body").on("click", ".cnt", function() {

});

Answer 2

你可以

试试这个

$(document).find(".cnt").on("click",function(){
    console.log(1);       // for testing
});

Answer 3

您需要将事件委托给动态创建的元素。

 $(document).on('click','.cnt',function(){
  alert("Processing comes here");
 });