Question

为什么不将jQuery应用于动态创建的元素？

这是jsFiddle：http://jsfiddle.net/Y5RuC/19/

当您单击常规单元格时，它会更改边框。单击生成的单元格时没有任何反应。为什么？我需要改变什么才能让生成的细胞发挥作用？

1）创建一个董事会：

function generateBoard() {
    var generatedDiv = "<div class='board'>";
        /* ... 
            generatedDiv += "<div class='cell'>&nbsp;</div>";
           ...
        */
    generatedDiv += "</div>"
    return generatedDiv
}

    $("#generate").click(function() { 
        generatedDiv = generateBoard();
        $("#board").after(generatedDiv);
    });

2）追加div：

generatedDiv = generateBoard();
$("#menu").after(generatedDiv);

3）点击更改边框：

    $(".cell").click(function() { 
        console.log(this);
        $(this).css("border", "3px solid black");
    });

它不适用于自动生成的内容。在纯HTML中：只是工作。在生成的董事会 - 只是没有:(这里再次是jFiddle：http://jsfiddle.net/Y5RuC/19/

如何使用 $（“。cell”）。点击在生成的主板上正常工作？

Answer 1

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

on版本：

$("body").on("click", ".cell", function(){
        console.log(this);
        $(this).css("border", "3px solid black");
});

工作JSFiddle

docs上的Jquery

Answer 2

您需要使用delegate()或live()方法来附加事件，这些方法适用于当前或未来的所有匹配元素。 delegate()是首选方法。

或者，如果您使用的是jQuery 1.7+，则可以使用on()（docs）

如何应用jQuery for append（添加，之前）div？

2 个答案: