Question

我现在已经使用jQuery一段时间了，但此问题从未发生过。

基本上，HTML：

<div class="button three"></div>
<div id="Content"></div>

CSS：

.button.three {
 width: 50px;
 height: 50px;
 background: blue;
 }

.textBlock {
    background: orange;
    height: 20px;
    width: 20px;
}

jQuery的：

$(document).ready(function () {

    $(".button.three").click(function() {
        $("<div class='textBlock'></div>").appendTo("#Content");
    });

    $(".textBlock").click(function() {
        alert("2");
    });

});

参见JSFiddle： http://jsfiddle.net/Brannie19/cQk8t/

为什么这不起作用？

--- --- EDIT 我想知道为什么.textBlock上的点击事件不会发生。来自dsaa和net.uk.sweet的答案实际上向我解释了，谢谢你们。

Answer 1

您正在尝试向尚不存在的元素添加侦听器。解决方案是将事件委托给使用jQuery on方法存在的父元素（参见documentation）：

$(document).ready(function () {

        $(".button.three").click(function() {
            $("<div class='textBlock'></div>").appendTo("#Content");
        });

        $("#Content").on('click', '.textBlock', function() {
            alert("2");
        });

    });

http://jsfiddle.net/YNWX8/

非常基本的jQuery

1 个答案: