无法在动态创建的内容上设置单击事件处理程序

Question

我有一些像这样的代码：

$('.play').on( 'click', function(){
    console.log('click');
});

使用.play方法动态创建$('.game').html('<span class="paly">Play</span>')元素。但是，当我点击此跨度时，我的控制台日志中没有任何内容。我做错了什么？

感谢。

PS：我正在使用jQuery 1.7.1

Answer 1

不要使用live() - 它已被弃用。而是使用on()，但在父元素上使用它来委托事件，如下所示：

$('#parentOfPlay').on('click', '.play', function(){
    console.log('click');
});

Answer 2

你可以使用live（现在已经在1.7.1中弃用了，所以你真的不应该使用它）或者使用on，但你在'on'的地方做错了。

$(document).on('click', '.play', function(){
    console.log('click');
});

Answer 3

这是一个很好的分解使用什么和什么时候。 https://stackoverflow.com/a/8845306/1139444

.on会为您提供您正在寻找的效果，但您需要在文档选择器上执行此操作并将类选择器放入.on调用中。

$(document).on( 'click', '.play', function(){
    console.log('click');
});

Answer 4

.play选择器正在寻找具有该类的容器，因此您需要使用以下代码生成代码：

$('.game').html('<span class="play">Play</span>');

Answer 5

.html()将具有名为game的类的所有块的内容设置为Play。您尚未创建任何类.play，因此执行$(".play")不会产生任何结果。 click功能未绑定到任何内容，控制台上不显示任何内容。尝试$(".game").on("click",function(){});

Answer 6

尝试

$(document).on('click', '.play'
    function(){
        console.log('click');
});

Answer 7

试试这个：

$('.play').live( 'click', function(){
    console.log('click');
});

Answer 8

执行代码时，您确定“.play”元素已存在吗？或者它可能只是稍后在代码中创建的......这可能是一个排序问题。

编辑：如果您想要它是动态的，请使用'live'而不是'on其他人的建议：）