Jquery problem .click .each

Question

Hi can you help me with this JQUERY based code?

<script>
$(function() {      
    $("#chatIM").each(function() { 
        $(this).click(function() { 
            $.post("chatController.php", { action:"getChat", 
                               user:"<?php echo $loggedInUser->display_username; ?>", 
                               other: $(this).attr("title"), 
                               type: "<?php echo USERTYPE; ?>"}, 
            function(data) { 
                $("#chatUsers").empty(); 
                $(document.createElement("div")).attr({id: 'chatbox'}).html(data).prependTo("body"); 
            }); 
        });
    }); 
});
</script>

<a id="chatIM" title="gowthami">CHAT ME</a>
<a id="chatIM" title="vaisakhi">CHAT ME</a>

I am not sure where is the problem but when I press first of those buttons it works but for the second it doesn't work (there will be a lot of A tags with the same ID so the code must work to each one. Perhaps its a wrong syntax at .each .click or somewhere else. Can you help me whith that?

I've tried to format your code a little better, but I may have missed something. You might want to make sure all your statements are structured and closed properly. — David
– David, Commented Sep 12, 2011 at 14:31

ipr101 · Accepted Answer · 2011-09-12 14:28:09Z

5

It will cause problems if you assign the same id to multiple elements, ids should be unique in a document. You could use classes instead -

<a class="chatIM" title="gowthami">CHAT ME</a>
<a class="chatIM" title="vaisakhi">CHAT ME</a>

and your jQuery would change to -

$(".chatIM").each(function ...

answered Sep 12, 2011 at 14:28

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Svetoslav Over a year ago

Yes.. totally forgot about this .. how silly of me :) Thank you.

Martin · Accepted Answer · 2011-09-12 14:28:10Z

2

You shouldn't have more than one element on a page with the same ID. Change the id to a class:

<script>
    $(function(){       
    $(".chatIM").each(function(){ 
$(this).click(function(){ 
$.post("chatController.php", {action:"getChat", user:"<?php echo $loggedInUser->display_username; ?>", other: $(this).attr("title"), type: "<?php echo USERTYPE; ?>"}, 
function(data){ 
$("#chatUsers").empty(); 
$(document.createElement("div")).attr({id: 'chatbox'}).html(data).prependTo("body"); }); });
}); 
});
</script>    
               <a class="chatIM" title="gowthami">CHAT ME</a>
               <a class="chatIM" title="vaisakhi">CHAT ME</a>

answered Sep 12, 2011 at 14:28

Martin

11.1k8 gold badges53 silver badges77 bronze badges

1 Comment

Svetoslav Over a year ago

Yes.. totally forgot about this .. how silly of me :) Thank you.

Mark Pope · Accepted Answer · 2011-09-12 14:28:28Z

2

The id field should be unique across the document. Try adding a class attribute like this:

<a class="chatIM" title="gowthami">CHAT ME</a>

And change the jQuery code to this:

$(".chatIM").each(function(){

answered Sep 12, 2011 at 14:28

Mark Pope

11.3k11 gold badges51 silver badges59 bronze badges

1 Comment

Svetoslav Over a year ago

Yes.. totally forgot about this .. how silly of me :) Thank you.

Collectives™ on Stack Overflow

Jquery problem .click .each

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related