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

Dynamically change element CSS properties after adding it on button click Javascript

本文关键字：属性 CSS 元素 动态 按钮 单击 添加 Javascript      更新时间：2023-09-26

用户通过单击按钮创建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");   
});

您需要对动态生成的元素进行事件委托，如下所示。

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

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

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

相关文章：