Javascript 如何将jQuery应用于附加（添加、前置）div？

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

以下是JSFIDLE：

单击常规单元格时，它会更改边框。 当您单击生成的单元格时，不会发生任何事情。 为什么？我需要改变什么才能让生成的单元格正常工作

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);
    });   

3） 单击即可更改边框：

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

它不适用于自动生成的内容。纯HTML格式： 只是工作而已。在生成的board中-只是不：（这里再次是JFIDLE:

如何为$（“.cell”）。单击可在生成的板中正常工作

$(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+

打开

版本：

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

工作

Jquery on

打开

版本：

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

工作

---

Jquery on

您需要使用

delegate（）

或

live（）

方法来附加事件，这将在当前或将来对所有匹配的元素起作用。

delegate（）

是首选方法

---

或者，如果您使用的是jQuery 1.7+，您可以使用

on（）

（）

您需要使用

delegate（）

或

live（）

方法来附加事件，这将对当前或将来的所有匹配元素起作用。

delegate（）

是首选方法

---

或者，如果您使用的是jQuery 1.7+，则可以在（）上使用

on（）

（）

live

即使与jQuery<1.7一起使用也不应使用。@jamesalardice。不完全。添加了所有版本函数。

live

即使与jQuery<1.7一起使用也不应使用。@jamesalardice。不完全。添加了所有版本函数。将您的更新为工作版本。更新将您的数据转换为工作版本。