Question

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

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

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

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。请使用以下内容：

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

进行ajax调用后jQuery函数无法正常工作

3 个答案: