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

我有一些这样的代码：

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

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

.play

元素是使用

$（'.game'）.html（'play'）

方法动态创建的。但是，当我单击此范围时，控制台日志中没有任何内容。我做错了什么

谢谢

PS：我正在使用jQuery 1.7.1

试试这个：

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

您确定在执行代码时“.play”元素已经存在吗？或者可能只是在以后的代码中创建的。。这可能是订购问题

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

尝试使用

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

您可以使用live（现在在1.7.1中不推荐使用live，所以您真的不应该使用它），也可以使用on进行操作，但您的“on”操作是错误的

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

不要使用

live（）

-它已被弃用。改为在（）上使用

，

，但在父元素上使用它来将事件委托给，如下所示：

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

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

---

这里是一个很好的分解使用什么和什么时候

.on

将为您提供所需的效果，但您需要在文档选择器上执行此操作，并将类选择器置于

.on

调用中

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

---

.play

选择器正在查找包含该类的容器，因此您需要使用以下内容生成代码：

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

$（'.game'）.html（'Play'）；

.html（）

设置所有具有名为game的类的块的内容。您尚未创建任何类

.play

，因此执行

$（“.play”）

不会产生任何结果。单击功能不绑定任何内容，控制台上也不显示任何内容。尝试执行

$（.game”）。在（“单击”，函数（）{}）

可能会有帮助，我相信你使用的是

on（）

像

bind（）

不像

on（）

那样：

$（“#parentOfPlay”）.on（“click”，“.play”，function（）{}）。是的，就是这样。如果我理解正确，我需要使用$（document）。在动态内容上使用$（'.selector'）。在非动态内容上使用，对吗？是-尽管如果它是动态内容，它应该是最近的非动态包含元素。如果使用
文档
，您可能会看到性能下降。
.live（）
已被弃用，必须避免使用。使用
.on（）
或
.delegate（）