進行Ajax調用后jQuery函數無法正常工作

Question

頁面ddlFilter會有一個下拉列表ddlFilter ，還有一個復選框（ divData id為239）。 更改下拉列表的值將進行ajax調用，然后將divData的內容替換為接收到的內容。 收到的內容是另一個復選框的HTML（例如ID 249）。
單擊任何復選框后，應觸發showProduct()

問題：最初在頁面加載后，當我單擊復選框239時，將觸發showProduct 。 但是，在更改下拉列表並單擊復選框249之后，不會觸發該功能。

控制台中沒有錯誤。 我認為事件處理未綁定到非常規添加的復選框。 我怎樣才能解決這個問題。

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

當您通過ajax替換DOM元素而不刷新時，事件不會自動附加。

你可能會用

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

Answer 2

嘗試這個

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

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

Answer 3

我們使用Ajax來滿足我們的要求而無需刷新頁面。在您的示例中，您要更改下拉列表的值，然后單擊任何值，但在這種情況下jquery事件無法與DOM元素綁定。因此您必須在更改時調用函數showProduct dropdowm值。 請在下面使用：

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