javascript - × 从 javascript 添加的不可点击？

Question

我已经从 javascript 添加了 html 内容，如下所示:

var response = { message: "sample messsage" };

$('#main-content').append(
    '<div class="alert alert-danger alert-dismissable">'+
    '<button type="button" class="close" data-dismiss=alert">'+
    '<span aria-hidden="true">&times;</span>'+
    '<span class="sr-only">Close</span>'+
    '</button>'+response.message+
    '</div>'
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main-content"></div>

html 代码追加工作正常，但 close X 不起作用。我到处都找遍了还是没找到解决办法。

欢迎任何建议。

Answer 1

不确定这是否是您所期望的。但要获得可点击的内容，您需要添加 onclick="clickevent()"

您还需要添加一个函数来响应onclick，即所示示例中的clickevent():

function clickevent() {
    $('#main-content').html('<div class="alert alert-danger alert-dismissable">'+
    '<button type="button" class="close" data-dismiss=alert">'+
    '<span aria-hidden="true">&times;</span>'+
    '<span class="sr-only">Close</span>'+
    '</button>'+
    '</div>'
);
}

请注意，.html 设置了所选内容的 html 元素，在示例中为 $('#main-content')。

请参阅以下代码片段:

var response = { message: "sample messsage" };

$('#main-content').append(
    '<div class="alert alert-danger alert-dismissable">'+
    '<button type="button" class="close" data-dismiss=alert">'+
    '<span aria-hidden="true">&times;</span>'+
    '<span class="sr-only">Close</span>'+
    '</button>'+response.message+
    '</div>'
);

function clickevent() {
    $('#main-content').html('<div class="alert alert-danger alert-dismissable">'+
    '<button type="button" class="close" data-dismiss=alert">'+
    '<span aria-hidden="true">&times;</span>'+
    '<span class="sr-only">Close</span>'+
    '</button>'+
    '</div>'
);
}

.alert{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main-content" onclick="clickevent()"></div>

引用onclick()和 .click() with .onclick() 之间的区别了解更多信息。