Question

用户使用按钮创建div后，我希望能够单击该div并更改其颜色。我想知道为什么这是不可能的。如果div是硬编码的，而不是在动态创建之后，它可以工作。另外，我该如何使其发挥作用？

$("#addDiv").click(function() {
    var div = '<div id="clickMe" style="width:200px; height:200px; background:blue;"></div>';
    $("#container").html(div);
});

$("#clickMe").click(function() {
    $(this).css("background", "red");   
});

Answer 1

对于动态生成的元素，您需要事件delegation，如下所示。

$('body').on('click', '#clickMe', function() {
    $(this).css("background", "red");   
});

Answer 2

没问题。只需在创建的元素上创建侦听器即可。像这样：

$("#addDiv").click(function() {
    var $div = $('<div/>', {
        id: 'clickMe',
        width: 200,
        height: 200,
      })
      .css('background', 'blue')
      .click(function() {
          $(this).css("background", "red");   
      });
    $("#container").html($div);
});

JSFiddle

在按钮单击Javascript上添加后，动态更改元素CSS属性

2 个答案: