Im using Javascript to build a button click and puzzle adventure game. The game will allow a series of button mands. When the "go" mand is clicked, the buttons change to different exits, and the class is changed to exit, like so:

function setExitButtons(){
    clearButtons();
    for (var i = 0; i < player.currentRoom.exits.length; i++) {
            var buttoni = button[i];
            buttoni.className = "exit";
            buttoni.innerHTML = player.currentRoom.exits[i].name;
            $(buttoni).show();
    }

}

Where clearButtons hides all of the buttons so only the correct ones show, and button[] is the nodelist for the buttons.

The class does change when this function is called.

I then have another jquery function with a class selector, like so:

$(".exit").click(function(){
          //roomchangefunction
});

The .exit function is not activated when the button with exit class is clicked. I have a document ready function enpassing the whole part. Thoughts?

Im using Javascript to build a button click and puzzle adventure game. The game will allow a series of button mands. When the "go" mand is clicked, the buttons change to different exits, and the class is changed to exit, like so:

function setExitButtons(){
    clearButtons();
    for (var i = 0; i < player.currentRoom.exits.length; i++) {
            var buttoni = button[i];
            buttoni.className = "exit";
            buttoni.innerHTML = player.currentRoom.exits[i].name;
            $(buttoni).show();
    }

}

Where clearButtons hides all of the buttons so only the correct ones show, and button[] is the nodelist for the buttons.

The class does change when this function is called.

I then have another jquery function with a class selector, like so:

$(".exit").click(function(){
          //roomchangefunction
});

The .exit function is not activated when the button with exit class is clicked. I have a document ready function enpassing the whole part. Thoughts?

• javascript
• jquery
• class
• button
• jquery-selectors

• 1 You're adding the class name after the page has loaded so need to use .on() with delegated events. It's been answered so many times, it doesn't need to be on here again. – Popnoodles Commented Jan 1, 2014 at 23:12
• 1 the button (the condition for the event) doesn't exist at the time the .click handler is added. You need to use .on on a parent element that always exists so that the event can bubble up and be caught there. – CrayonViolent Commented Jan 1, 2014 at 23:13

3 Answers 3

This only runs once, when the document loads:

$(".exit").click(function(){
    //roomchangefunction
});

At that time, there are no matching elements for .exit. So no click handlers are assigned. After that, this never runs again.

Since the elements are dynamically changing, I remend binding a click handler to a mon parent element using .on() instead. Something like this:

$(document).on('click', '.exit', function () {
    //roomchangefunction
});

The difference is that the click event is actually assigned to a mon parent (in this case document, though any mon parent element will work such as a div which always contains the .exit elements). When an element is clicked, the "click" event occurs on that element and all the way up the DOM. So this handler would be invoked. The second argument is a filter, so it looks for elements which match that filter when invoking the handler function.

That way the filter for .exit happens when the element is clicked, rather than when the document is loaded, so that elements which are dynamically changed during the life of the document are still handled.

You're adding the class name after the page has loaded so need to use .on() with delegated events. Basically it means, the event is bound to the parent (in this case document), but affects the designated children (in this case .exit).

$(document).on('click', '.exit', function(){
          //roomchangefunction
});

You need to use .on() like so:

$(".exit").on("click", function(){
          //roomchangefunction
});