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?

Answer 1

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 ...