jquery - 通过 jquery 创建的按钮不起作用

Question

我将一个按钮附加到一个 div 框，但我无法将单击功能应用于新按钮。在给定的示例中，我想通过单击按钮来更改 div 框的颜色。

js小提琴

HTML

<ul id="box"></ul>
<button id="add" type="button">Add button!</button>

jQuery

$("#add").click(function() {

    $("#box").append(' <button class="color" type="button">change color!</button> ');
});


$(".color").click(function(){
    $("#box").css("background","red");
});

Answer 1

jsFiddle 演示

这是事件委托的经典案例。由于您使用 jquery 动态创建了按钮，因此click您编写的事件不会触发。您必须使用以下方式处理.on()

利用，

$(document).on('click', '.color', function() {
    //Do something
});

注意：document在大多数情况下，作为父级使用是不好的，它会影响性能，因为此事件会在整个文档中搜索所需的类color。因此，请替换为始终存在于 DOM (static) 中document的最近的父级。可能是你的情况$('#box)

$('#box').on('click', '.color', function() {
    //Do something
});

Answer 2

正确的创建解决了委派的问题：

$("#add").click(function() {
    var button = $('<button />', {
        'class': 'color',
        type   : 'button',
        text   : 'change color!',
        on     : {
             click: function() {
                   $("#box").css("background","red");
             }
        }
    });

    $("#box").append(button);
});

小提琴

改为委托，并继续使用字符串，请执行以下操作：

$('#box').on('click', '.color', function() {
    $("#box").css("background","red");
});

Answer 3

您可以为此使用实时委托：

$("#box").on('click', '.color', function(){
    $("#box").css("background","red");
});

当页面加载时，没有带有类的元素，.button因此没有绑定到该元素的事件。使用.on()它将实时绑定到元素。

jsFiddle

Answer 4

您已使用事件委托将事件应用于动态创建的元素

尝试这个

$("body").on("click",".color",function(){
    $("#box").css("background","red");
});

这是小提琴http://jsfiddle.net/AfUZS/6/

Answer 5

无法将任何未在 DOM 中添加的事件添加到 html 步骤 1：将按钮添加到 DOM 步骤 2：将单击事件添加到按钮

$("#add").click(function() {
    var newButton = $('<button class="color" type="button">change color!</button>');
    $("#box").append(newButton);
    newButton.click(clickNewBtn)
});

function clickNewBtn(){
    $("#box").css("background","red");
}

http://jsfiddle.net/AfUZS/5/