CODEWITHSUNDEEP
javascriptjquery
Kristofer Aron Sverrisson
Kristofer Aron Sverrisson

Reputation: 111

jquery not reacting to class changes?

So I've got this assignment I've got to do, it has to do with a christmas tree where you can click the branches and turn them into ornaments and whatnot. When the tree is on, you should not be able to change the ornaments. So far i've got this jquery:

$('.branch1, .ornament1, .light1').click(function() 
{
    alert("WARNING - Power off the tree first!");
    die();
});

$('.branch, .ornament, .light').click(function() 
{                             
    this.className = 
    {
       light : 'branch', branch: 'ornament', ornament: 'light'
    }[this.className];
});

$('#treePowerButton').click(function() 
{
    $(".branch, .branch1").toggleClass("branch branch1");
    $(".ornament, .ornament1").toggleClass("ornament ornament1");
    $(".light, .light1").toggleClass("light light1");
    $(".powerStatus, .powerStatus1").toggleClass("powerStatus powerStatus1");
});

$('#treeClearButton').click(function() 
{
    $(".ornament").toggleClass("ornament branch");
    $(".light").toggleClass("light branch");
});

But when I turn the tree on and click a branch or ornament it doesn't throw the alert, it just makes the clicked item completely disappear. What am I doing wrong?

here's a jsfiddle: http://jsfiddle.net/a1smjgrv/

Upvotes: 0

Views: 83

Answers (1)

jeffdill2
jeffdill2

Reputation: 4114

Refined Answer:

Try this jsfiddle: http://jsfiddle.net/a1smjgrv/5/. It will accomplish what you're looking for and is much simpler than trying to bind multiple click events on the same element.

Original Answer:

The problem is that when the page is loaded, there are not any 'branch1', 'ornament1', or 'light1' elements on the page, so the click event containing the alert() is not being bound to anything. There are only 'branch' elements on the page, so the click events for the branches are all that's bound.

When the tree is powered ON and the 'branch' elements are changed to be a 'branch1' class, the click event containing the className update are still attached to that element. So, when it tries to update the class name based on your object literal ({light: 'branch', branch: 'ornament', etc...}), it can't find a match for any of those because the class name of the given element is now 'branch1' instead of 'branch', so it's setting the class name on the element to 'undefined' (hence, the disappearance).

If you want a function to be bound to an element at any point in time that the element is rendered to the page, you'll need to bind it at the document level instead. Something like the following:

$(document).on('click', 'branch1', function() {
  alert('SHAZAM!');
});

Upvotes: 1

Related Questions