Question

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

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 DEMO

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

按如下方式处理

使用，

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

注意：在大多数情况下，使用document作为父母是不好的它会影响性能，因为此事件会在整个文档中搜索所需的类color。因此，将document替换为最接近的父项，其中始终存在于DOM（静态）中。在您的情况下可能是$('#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);
});

FIDDLE

代替委托，并继续使用字符串，执行：

$('#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步：将click事件添加到按钮

$("#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/

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

5 个答案: