jQuery单击函数不在类上工作

Question

所以我有一堆我想要点击的游戏.如果我向按钮添加一个单击功能,我会得到所需的结果,但是当我将它添加到游戏块类时,它无法工作.

这是一个在jsfiddle上正常工作的例子,但是当我在我的脚本中使用它时不是这样:http: //jsfiddle.net/sLt7C/

这是我想在我的页面上做的事情:

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

这不起作用,但如果我将标识符切换到页面上的按钮,它确实有效:

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

什么可能导致这失败？

不确定这是否会对导致其失败的因素产生任何影响,但"游戏片段"是单击"新游戏"按钮后生成的跨度元素.

这是一个小提示,显示更多代码http://jsfiddle.net/sLt7C/4/

进一步澄清:

这不起作用

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

这有效

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

Answer 1

我想你想要这个：

$(document).ready(function() {

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

代替

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

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

只需证明http://jsfiddle.net/aras7/sLt7C/7/

Answer 2

如果在页面加载后添加游戏块(即通过单击按钮),则需要使用jquery使用事件委派 .on()

事件委托允许我们将单个事件侦听器附加到父元素,该元素将为匹配选择器的所有后代触发,无论这些后代现在是存在还是将来添加.

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