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

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

• javascript
• jquery
• asp
• ajax

Share Improve this question Follow edited Dec 30, 2015 at 6:41 sukesh asked Dec 30, 2015 at 6:39 sukeshsukesh 2,4111212 gold badges6464 silver badges130130 bronze badges 5

• 2 Try to have id starting with a character. – Hemal Commented Dec 30, 2015 at 6:40
• but I'm calling it by css clsas – sukesh Commented Dec 30, 2015 at 6:46
• Still, you cant get an event attached, because event is attached only once in $(document).ready(). When you replace an element without refreshing page, event is gone.So you have to use alternate way. – Hemal Commented Dec 30, 2015 at 6:48
• Then how do call the function if the IDs are dynamic? – sukesh Commented Dec 30, 2015 at 6:51
• Try to add a fixed string before numeric id like "ID249" – Hemal Commented Dec 30, 2015 at 6:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try this

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

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

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

You might use

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

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