Question

I have created a while loop that selects random images from from my server and posts it. Now I want to add some jquery code and allow me to click on one of the images and run the slideUp() function in jQuery. Here is my problem. I can click on the first image produced in the while loop but when I click on the second image nothing happens. The slideUp() function does not work. I don’t know what to do. Here is the code below.

<script src="http://code.jquery.com/jquery-latest.js"></script>

<?php    
   $num_dresses = dress_count ();   
   $i=0;    
   while ($i < 2){  
?>

<style>     
   div:hover { border:2px solid #021a40; cursor:pointer;}      
</style>

<script>  
    $("div").click(function () {
           $(this).slideUp();    
    });
</script>   

<?php       
    $rand_id = rand(1, $num_dresses);       
    $dress_feed_data = clothing_data($rand_id, 'file_name', 'user_defined_name', 'user_defined_place' , 'user_who_uploaded', 'match_1');
    $new_file_name = $dress_feed_data['file_name']; 

    if (file_exists('fashion_images/' . $new_file_name)){

      echo str_replace("|", " ", $dress_feed_data['user_defined_name']);
?>

    <br>                    
    <div>    
     <img  src=" fashion_images/<?php echo $new_file_name;?> " width="50" height="50" />  
    <div>
        <br><br>  
    <?php      
        echo str_replace("|", " ", $dress_feed_data['user_defined_place']);      
    ?>

    <br><br>

    <?php
    }    
    $i++;           
    }    
?>

Answer 1

You are binding the click handler to the elements before the elemnts are inserted into DOM,

Probably when the first call is made no elements called div are there so the binding goes to void, then the first element gets inserted.
Now the binding for second element is made, now it gets attached to first one as it matches $('div') . So you got only forst one working.

The clean way is to take the click binding out of while loop, so that it happens only once, and call it on DOM ready event

<script>
$(document).ready(function(){
  $("div").click(function(){
    $(this).slideUp();
    });
  });
</script> 

And if you want to make a live binding, which applies to all dynamically added images as well use delegation:

<script>
$(document).ready(function(){
  $('body').on('click',"div",function(){
    $(this).slideUp();
    });
  });
</script> 

If you are posting the above images with html to a host/parent page, just add the above delegation logic to parent page, and post only the images.