javascript - jQuery 函数在进行 ajax 调用后不起作用

Question

页面中有一个下拉列表 - ddlFilter，页面加载时还有一个复选框(divData 中的 id 为 239)。更改下拉列表的值将进行 ajax 调用，然后将 divData 的内容替换为收到的内容。接收到的内容是另一个复选框(比如 id 249)的 HTML。
单击任何复选框时，它应该触发 showProduct()

问题:最初在页面加载后，当我单击复选框 239 时，showProduct 被触发。但是在更改下拉列表并单击复选框 249 后，该功能未被触发。

控制台没有错误。我认为事件处理未绑定(bind)到异步添加的复选框。我该如何解决这个问题。

ASPX:

<asp:dropdownlist id="ddlFilter" runat="server/>

<div id="divData">
<input type="checkbox" class="chkBx" id="239"> --line 1

<!--On changing the dropdown value, line 1 will be replaced by this.-->
<!--<input type="checkbox" class="chkBx" id="249">-->
</div>

JS:

$(document).ready(function(){
 $("#ddlFilter").change(function(){
   //code to make ajax call and bind new html inside divData
 })

 $(".chkBx").change(function(){
   showProduct();
 })
})

function showProduct(){
  alert();
}

Answer 1

试试这个

 $( "body" ).delegate( ".chkBx", "change", function() {
       showProduct();
    });

    $( "body" ).on("change",".chkBx",function(){
       showProduct();
     });