jQuery class not trigger after ajax

JavaScript
1

Hi there,

I had searched everywhere but not able to find the solutions for my current problem. Appreciate if any could help me out. Thanks in advance.

Using “class” to trigger jQuery. The code works on first html load but after sub-page reload thru ajax, the “class” no longer trigger. However, if using ‘click’, it still trigger. I want it to trigger whenever a “class” name is defined like first load.

Test codes are as follow:

HTML Head section


<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('body').on('click','.clickMe',function(){
	alert("Click Ok!");
});	
});


$(document).ready(function(){
$('.alertMe').each( function(){
   alert('Alert Ok!');
});
});

</script>

in HTML Body section Div class


<div id="click1" class="clickMe">Click me to trigger</div>
<div id="alert1" class="alertMe">Alert Me</div>

ClickMe works even printing same div with same class after ajax called.

However, alertMe will execute on first page load, after ajax call, any div class print will not trigger.

Hope someone can help me out here. Thanks.

2
  • UPDATE *

My current solution for after ajax call is to put the jQuery in a function. Therefore, whenever after ajax is called, will use js to call/trigger this function to update. Is this how it should be done? Or there are better ways? of using actual jQuery DOM or something?

3

Hard to say. What does the ajax function look like / do ?

4

I’m using ajax to call a perl script to print the dynamic content where there will have html codes with “class” defined. Basically just this 2 lines of DIV codes will do


<div id="click1" class="clickMe">Click me to trigger</div>
<div id="alert1" class="alertMe">Alert Me</div>

clickMe still are able to trigger in dynamic content print out.

alertMe not trigger. I need this to trigger so it can auto update the style defined which act like CSS.

Any kind of ajax call should do as topic here is not about ajax function. It is just after ajax dynamic content printed with “class”, the jQuery does not trigger as like usual CSS class does.

5

If the ajax callback is altering the DOM in any way, especially the links that no longer work, the ajax code could have everything to do with the problem.