Question

I have 3 elements with the same structure

<div id="Chatbox1">
    <div class="chatboxhead">            
        <div class="chatboxoptions">
            <a href="javascript:void(0)" class="ToggleChatBoxGrowth" title="Minimize chat box">-</a>
        </div>
    </div>                
</div>

the only difference is that each one of them has a different ID (Chatbox1, Chatbox2, Chatbox3).

I tried to bind ‘Click’ event to .ToggleChatBoxGrowth class for each one:

$('#chatbox_' + id + ' > .chatboxhead > .chatboxoptions > .ToggleChatBoxGrowth').click(function ()
    {
        ChatBox.ToggleChatBoxGrowth(id);
    });

but the problem is that all of them are bound by the same click event.
So when I click on ChatBox1 one I’m getting click event with id = ChatBox3

Can you help?

Answer 1

I would bind the click even to ToggleChatBoxGrowth using the class selector, then traverse up the DOM to receive the parents Id.

$(".ToggleChatBoxGrowth").click(function(){
   var parentId = $(this).parents(".chatboxhead").parent().attr("id");
   ChatBox.ToggleChatBoxGrowth(parentId);
});

Example: http://jsfiddle.net/6C2aQ/