user3455290 user3455290 - 3 months ago 5x
Javascript Question

Jquery Issue: All My SQL Queries

In my code below, the JQuery events (mouseenter and leave) are implemented only on the first row of the entire list. So if I have more than one row in the results, the other rows are not effected by the JQuery and no change in the image height is done on mouseover. Can anyone explain the problem? and offer a possible solution?

<!DOCTYPE html>
<link type="text/css" rel="stylesheet" href="css/main.css">
<div id="headpanel"></div>
<div id="tablehead">
<a href="addmember.php"><img src="images/ico/add.png" id="addmember"><span style="position:absolute; top:3vmax; left:11vmax;">Add A New Profile </span></a>
<div id="tablebody">
$profile_test = mysqli_query($db,"SELECT * FROM studs WHERE prof_id= '$prof_id'");
while($profile = mysqli_fetch_array($profile_test))

<div id="contact<?php echo $profile['stud_id']; ?>" class="contactblock">
echo "Name:";
echo "&nbsp;";
echo "&nbsp;";
echo $profile['firstname'];
echo "&nbsp;";
echo "&nbsp;";

echo $profile['lastname'];
echo "<br>";
echo "Marks:";
echo "&nbsp;";
echo $profile['marks'];

<img src="images/ico/edit.png" id="editprofile">


<script type="text/javascript">






You're using the same ID on multiple elements. Inside your loop, you have:

<img src="images/ico/edit.png"  id="editprofile">

IDs must be unique:

The property represents the element's identifier, reflecting the id global attribute. It must be unique in a document...

Change that to a class:

<img src="images/ico/edit.png"  class="editprofile">

And then adjust your binding to $(".editprofile") instead of $("#editprofile")