CODEWITHSUNDEEP
jqueryasp.net-mvc-3
John John
John John

Reputation: 1

Why jquery function can not be executed for two images that have the same ID

i have the following script inside my asp.net MVC application to bounce the image

   $(document).ready(function () {
        $("#to-get-bigger").mouseover(function () {
            $(this).effect("bounce", { time: 3, distance: 40 });
        });
    });

and on the view i have the following two images with the same Id:-

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" 
onclick = "return confirm('This will make the Assessment avilable for the regestred user.')" > 
   <img id = "to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" />
</a>

 <a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" 
onclick = "return confirm('This will make the Assessment avilable for the regestred user.')" > 
   <img id = "to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" />
</a>

But the problem is that the Jquery function will only execute and bounce one image while it will not work on the second image,, although i have read that the Jquery selector in this case the #to-get-bigger will return all the elements that have this ID and the Jquery function will be executed once the user move the mouse on any of the intended elements ? BR

Upvotes: 1

Views: 133

Answers (3)

voigtan
voigtan

Reputation: 9031

No, it will get an collection of one Id named #to-get-bigger, and ID must be uniqe on a page, you should use a css class instead. http://www.w3.org/TR/html4/struct/global.html#h-7.5.2 gives you the w3c spec on how it works.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337637

Having multiple elements with the same id is invalid, and causes issues like this. The id attribute should be unique. To reference multiple elements with a single attribute, use a class:

HTML

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" onclick="return confirm('This will make the Assessment avilable for the regestred user.')" > 
    <img class="to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" />
</a>

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" onclick="return confirm('This will make the Assessment avilable for the regestred user.')">
    <img class="to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" />
</a>

jQuery

$(document).ready(function () {
    $(".to-get-bigger").mouseover(function () {
        $(this).effect("bounce", { time: 3, distance: 40 });
    });
});

Upvotes: 3

Kevin B
Kevin B

Reputation: 95047

Id's must be unique. The native javascript method that jQuery uses document.getElementById() only returns the first element it finds with a specific ID.

If you select elements using jQuery by ID, it will only return one element since there can only be one valid element with that ID. There are some edge cases though where I have seen it work, such as with the jquery corners plugin, though even that doesn't work in all browsers when not using unique ID's.

Upvotes: 3

Related Questions