5

So I have a bunch of game pieces that I want to be clickable. If I add a click function to a button I get the desired result, but when I add it to the game piece class, it fails to work.

Here is an example that works fine on jsfiddle, but not when I use it in my script: http://jsfiddle.net/sLt7C/

Here is what I want to do on my page:

$('.gamePiece').click(function(){
    $('.gamePiece').addClass("toggled");
});

This doesn't work, but if I switch the identifier to a button on the page it does work:

$('#btn_AddClass').click(function(){
    $('.gamePiece').addClass("toggled");
});

What could be causing this to fail?

Not sure if this has any impact on what could be causing it to fail, but the "game pieces" are span elements that are generated after clicking a "New Game" button.

Here is a fiddle showing more code http://jsfiddle.net/sLt7C/4/

For further clarification:

This doesnt work

$('.gamePeice').click(function(){
    $(this).addClass("toggled");
});

This works

$('#btn_addClass').click(function(){
    $('.gamePeice').addClass("toggled");
});
TheShaggyBeard
  • 105
  • 1
  • 2
  • 11
  • did you mean this http://jsfiddle.net/aras7/sLt7C/2/ ? – Andres May 25 '14 at 04:44
  • Not really, I want the click to work on a class, not an ID. The original fiddle works fine, but for whatever reason it doesnt work when I try it on my site. – TheShaggyBeard May 25 '14 at 04:46
  • do you add your '.gamePiece' element with javascript or it is on your .html file? – Andres May 25 '14 at 04:50
  • @TheShaggyBeard take a look at Stephen answer, that could helps. If it doesn't tell us why. – Andres May 25 '14 at 04:51
  • 1
    Please clarify your question by adding more code or possibly a demo of the code that isn't working. – Ian May 25 '14 at 04:55
  • Ok here is a fiddle of the most of everything to show where I am at. http://jsfiddle.net/sLt7C/4/ – TheShaggyBeard May 25 '14 at 05:00
  • what is wrong at http://jsfiddle.net/sLt7C/4/ ? I looks ok, when press 'Add Class' it works – Andres May 25 '14 at 05:19
  • That is what I was saying in the original question up top. When I use the click function on a button it works, but when I use it on the .gamePeice class it doesnt. So try clicking on any of the generated tiles and nothing happens. I want to be able to toggle (ie change the border color) of a single game peice when clicked. – TheShaggyBeard May 25 '14 at 05:24
  • @TheShaggyBeard see my answer, I think that is what you are looking for – Andres May 25 '14 at 05:27

2 Answers2

21

If the game pieces are added after the page load (i.e. by clicking a button) you need to use event delegation by using jquery .on()

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(myContainer).on('click', '.gamePiece', function(){
  $(this).addClass("toggled");
});
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • 1
    This is called event delegation. – Ryan May 25 '14 at 04:52
  • 1
    http://learn.jquery.com/events/event-delegation/ – Andres May 25 '14 at 04:54
  • Hey please learn about even delegation outside of jQuery :); – Ryan May 25 '14 at 05:11
  • I tried this, but it still isn't working. What is "myContainer" referring to? Can you show me in the fiddle? http://jsfiddle.net/sLt7C/4/ – TheShaggyBeard May 25 '14 at 05:15
  • 1
    It could be the document element, but preferably the closest ancestor that contains all the `` elements, for example you might have a `
    ` that is the main container element, in which case it would be `$('#gameBoard').on('click', ....`
     –  May 25 '14 at 05:23
  • I've updated the fiddle [here](http://jsfiddle.net/sLt7C/8/) –  May 25 '14 at 05:30
9

I think you want this:

$(document).ready(function() {

    $(document).on('click', '.gamePeice', function(){
        $(this).addClass("toggled");
    });
});

instead of

$('.gamePeice').click(function(){
    $(this).addClass("toggled");
});

$('#btn_addClass').click(function(){
    $('.gamePeice').addClass("toggled");
});

just prove http://jsfiddle.net/aras7/sLt7C/7/

Andres
  • 4,323
  • 7
  • 39
  • 53