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代码附加正常工作，但关闭X无法工作。我到处都看不到解决方案。

任何建议都值得赞赏。

Answer 1

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

另外，您需要添加一个function来响应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()之间的区别以获取更多信息。

Answer 2

这是因为在将元素添加到html文件之前已加载js文件。您可以将元素添加到html文件中，并在开始时将.hide（）进行添加。当您需要它们时，只需.show（）元素即可。

×从javascript添加无法点击？

2 个答案: