CODEWITHSUNDEEP
javascriptjqueryasp.netajax
sukesh
sukesh

Reputation: 2437

jQuery function not working after making an ajax call

There is a dropdown in the page - ddlFilter, and also a checkbox (with id 239 inside divData) at page load. Changing the value of the dropdown, will make an ajax call and then replace the divData's content with the one that is received. The received content is HTML of another checkbox (say id 249).
When any checkbox is clicked, it should fire showProduct()

ISSUE : Initially after page load, when I click checkbox 239, showProduct is fired. But after changing the dropdown and clicking on checkbox 249, the function isn't fired.

There are no errors in console. I think the event handling is not bound to the asynchrounosly added checkbox. How can i fix this.

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();
}

Upvotes: 1

Views: 2301

Answers (3)

Manoj Saini
Manoj Saini

Reputation: 339

We use Ajax for fulfill our requirement without refreshing page.In your example you are changing dropdown's value then click on any value but in that case jquery events cannot be bind with DOM element.So you have to call your function showProduct at the time of changing the dropdowm value. Please use below :

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

Upvotes: 1

Domain
Domain

Reputation: 11808

Try this 

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

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

Upvotes: 4

Hemal
Hemal

Reputation: 3760

When you replace a DOM element via ajax without refreshing, events are not attached automatically.

You might use 

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

Upvotes: 3

Related Questions