PHP While Loop and jQuery - php

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.

Answer 2

Try this :
<style>
div:hover { margin:10px 0; border:2px solid #021a40; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("div.randomImage").click(function() {
$(this).slideUp();
});
});
</script>
<?php
$num_dresses = dress_count();
$i=0;
while ($i < 2) {
?>
<?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']);
?>
<div class="randomImage">
<img src="fashion_images/<?php echo $new_file_name;?>" width="50" height="50" />
</div>
<?php
echo str_replace("|", " ", $dress_feed_data['user_defined_place']);
}
$i++;
}
?>
Notes:
Stylesheet and script moved outside the php while loop. Repetition is unnecessary and undesired.
jQuery statement now inside a $(function(){...}) structure to ensure it runs when the ducument is ready, ie. after the served HTML has been interpreted by the browser to create DOM elements.
class="randomImage" added to the <div>
Second <div> changed to </div>
For readability of source and served page, the PHP and HTML are indented independently.
I've not tried to verify the PHP.