Question

Alright, so I’m making a Facebook-style chat. But that doesn’t really matter.

See here:
http://jsfiddle.net/SkHme/7/

Nice and pretty, right? Well, there’s a problem. Notice this line:

<div class="conversation EmperorCuzco" onclick="setActive('EmperorCuzco')">

See the onclick attribute? Well, it’s not working. However, I have confirmed that the function itself DOES work. (if you run it just like that in the JavaScript, it runs like a dream) I have further confirmed that the function is not the problem by attempting to replace the onclick value with a simple alert('blah'), but that doesn’t work either.

So, what’s up? I’m guessing that something in my JavaScript is somehow disabling something, but I have absolutely no idea what it could be, nor how I could go about fixing it. I did some web searching, but couldn’t find anything that helps.

What’s going on?

Answer 1

Your setActive function is defined inside the scope of the $(document).ready handler. Move the function outside that function so that it is in the global scope.

Right now it looks like this:

$(document).ready(function()
{
    // ...
    function setActive(new_conversation)
    {
        // ...
    }
});

Now change that to:

$(document).ready(function()
{
    // ...
});

function setActive(new_conversation)
{
    // ...
}

Really though, you should separate your content from your interactions and bind those event handlers in your script itself. Something like:

// Refers to the last clicked conversation *button*
// Initialize to empty jQuery object
var $active_conversation = $([]);

// Binding on #chat, targeting click events on .conversation_button children
$("#chat").on("click", ".conversation_button", function() {
    // Hide currently active conversation
    $active_conversation.hide();
    $active_conversation.siblings('.conversation_button').removeClass("selected");

    // Set as currently active conversation button
    // Note: this refers to the clicked <div class="conversation_button">
    var $this = $(this);
    $active_conversation = $this.siblings('.conversation');

    // Show this conversation
    $active_conversation.show();
    $this.removeClass("alert").addClass("selected");
});

Some advantages of this approach:

• You don’t need different classes for different conversations. By storing the actual conversation DOM element (as a jQuery object) in $active_conversation, the conversation can be identified without any extra processing.
• You can add and remove whole list items with a conversation without assigning new event handlers. In the sample above, the event handler for all .conversation_button elements is defined at the level of #chat. For more about this binding mechanism, read up on .on (or .delegate for pre-1.7).

Here, have an updated fiddle! 🙂