jquery not working on ajax loaded content

Question

I have a multiple checkboxs loaded from another file by ajax with class 'chk-bx'

<script>

$('.chk-bx').on( "click", function(){

   alert("checked");
   });

</script>

There are some checkboxes that are there beore loading ajax then its working fine. but after loading its not working.

Thanks you verymuch

bgazsi · Accepted Answer · 2019-12-05T15:59:00.790

0

The event handler is initialized before the checkboxes get to the DOM. You have to initialize the handler on the new checkboxes after they appeared in the DOM.

Edit: As Rory said, you can use a delegated event handler. You can attach the handler to a common parent of your checkboxes, like $( "#checkbox-container" ).on( "click", ".chk-bx", function() {...}). That way the newly added checkboxes in the #checkbox-container element will have that listener ran on a click event. You can read more about it here: https://learn.jquery.com/events/event-delegation/

edited Dec 05 '19 at 15:59

answered Dec 05 '19 at 15:41

bgazsi

141
8

1

Or even simpler, use a single delegated event handler on all of them. – Rory McCrossan Dec 05 '19 at 15:47
Yes, that's right, that makes it simpler, I add that to the answer – bgazsi Dec 05 '19 at 15:55

jquery not working on ajax loaded content

1 Answers1