CODEWITHSUNDEEP
jqueryhtmlajaxloadtoggle
maudichili
maudichili

Reputation: 49

JQuery slideToggle not working in content html ajax

$('.slideToggle1').click(function(){
$(this).siblings('.mover1').slideToggle();
});

...... In body:

<h3 class="slideToggle1" ><img src="images/como/menu/1.png" style="max-width:100%"   alt=""/></h3>
<div class="mover1" style=" display:none;" >
<p><img src="images/como/imagenes/1.png" style="max-width:100%"  alt=""/></p>
</div>

Work ok. ........................................................

But if called by ajax:

$.ajax({
  type: 'POST',
  url: "xxxxxx/example.php",
  data: "",
   success: function(resp){

        $("#contenedor").html(resp);
   }

And resp ajax is:

<h3 class="slideToggle1" ><img src="images/como/menu/5.png" style="max-width:100%"   alt=""/></h3>
<div class="mover1" style=" display:none;" >
<p><img src="images/como/imagenes/5.png" style="max-width:100%"  alt=""/></p>
</div>

The slideToggle isn't working - can someone help me figure out why?

Upvotes: 0

Views: 591

Answers (1)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79840

Change 

$('.slideToggle1').click(function(){

to 

$('#contenendor').on('click', '.slideToggle1', function (

Event delegation technique as .slideToggle doesn't exist and it is dynamically inserted to DOM.

Upvotes: 1

Related Questions