如何将jQuery应用于附加（添加，之前）div？答案

【问题标题】：How to apply jQuery for appended (added, befored) divs?如何将jQuery应用于附加（添加，之前）div？
【发布时间】：2012-01-23 09:04:12
【问题描述】：

为什么不将 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").click 在生成的板上正常工作？

【问题讨论】：

已将您的 JSFiddle 更新为工作版本。

标签： javascript dom javascript-events jquery

【解决方案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

【讨论】：

live 即使 jQuery delegate。
@JamesAllardice。不完全的。添加所有版本功能。

【解决方案2】：

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

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

【讨论】：