I have this code:

<span id="Santiago4">Santiago</span> 
<br>more html code here<br> 
<span id="Santiago4">Santiago</span>
<script>
    jQuery("#Santiago4").click(function() {alert("blabla")} );
</script>

My problem is that when I click on the html text on first occurence, the click event triggers the alert pops up. But when I click the second occurrence (or any other if Santiago appears a few times in the text) nothing happens.

Why is that? Why when clicking the second span element that it also has the id: Stantiago4 the function's code does not run?

Thanks in advance.

I have this code:

<span id="Santiago4">Santiago</span> 
<br>more html code here<br> 
<span id="Santiago4">Santiago</span>
<script>
    jQuery("#Santiago4").click(function() {alert("blabla")} );
</script>

My problem is that when I click on the html text on first occurence, the click event triggers the alert pops up. But when I click the second occurrence (or any other if Santiago appears a few times in the text) nothing happens.

Why is that? Why when clicking the second span element that it also has the id: Stantiago4 the function's code does not run?

Thanks in advance.

• javascript
• jquery

Share Improve this question Follow edited Apr 27, 2011 at 12:51 Andrew Whitaker 126k3232 gold badges295295 silver badges308308 bronze badges asked Apr 27, 2011 at 12:49 maikymaiky 3,67377 gold badges3131 silver badges3030 bronze badges 2

• 1 You cannot have more than one element with the same id attribute. – Andrew Whitaker Commented Apr 27, 2011 at 12:52
• 2 Further to Andrew's ment, if you need the same 'name' or reference for more than one element you should use class not id. – David Thomas Commented Apr 27, 2011 at 12:53

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Element ID attributes are intended to be unique. If you want to share attributes, rather use the class attribute:

<span class="santiago4">Santiago</span>
<br/>more html code here<br/> 
<span class="santiago4">Santiago2</span>

In other words, instead of id, use class. Then the jQuery would be:

jQuery(".santiago4").click(function() {
   alert("clicked!")
});

Now the click event will be bound to all HTML elements with the class 'santiago4', which is what you are looking for.

ID should be unique across the HTML elements.

You can instead assign a mon classname to each of the span and the use .classname as jQuery selector.

Try this:

<span class="Santiago4">Santiago</span> <br/>
more html code here<br/> 
<span class="Santiago4">Santiago</span> 
<script>
    jQuery(function(){
        jQuery(".Santiago4").click(function() {
            alert("blabla")
        });
    });

</script>

You can't have more than one element with the same Id, these need to be distinct. For the usage you are describing you need to use another selector such as a class:

<span class="Santiago4">Santiago</span> 
<br>more html code here<br> 
<span class="Santiago4">Santiago</span>
<script>
    jQuery(".Santiago4").click(function() {alert("blabla")} );
</script>

Change it to use a class because as Andrew said, you can't have more than one element with the same ID:

<span class="Santiago4">Santiago</span> 
<br>more html code here<br> 
<span class="Santiago4">Santiago</span>
<script>
    jQuery(".Santiago4").click(function() {alert("blabla"); } );
</script>

Working JS Example

They both have the same ID, which isnt' good HTML and will cause problems when trying to manipulate with jQuery. Try using the class name instead:

<span class="Santiago4">Santiago</span> <br>more html code here<br> <span class="Santiago4">Santiago</span> <script>jQuery(".Santiago4").click(function() {alert("blabla")} );</script>