Question

我有一个主页面，当文档准备好时我通过ajax加载了另一个页面，我也有一个按钮，当我点击它时我会显示一个警告，我也在第二页中有了该按钮。但当我在该页面中点击该代码不起作用？我该如何解决这个问题？

因为我不想在第二页上重复js codes？

这是我的第一页代码：

第一页代码：

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
<div class="captcha" style="border:1px solid red;">
</div>
<div class="details1">cccc</div>
<script>
$(document).ready(function(e) {
$(".captcha").load("/secondpage.htm");
$(".details1").click( function()
{
 alert('button clicked');
}
);

});
</script>
</body>
</html>

这是我用divname加载到div的第二页：

第二页代码：

<html>
<head>
</head>
<body>
 <section class="details1"> Details </section>
</body>
</html>

Answer 1

当您需要即时创建新元素时，您无法使用标准点击等事件。动态创建的元素不具有与现有元素相同的事件处理程序。您必须动态地将事件处理程序附加到新创建的元素。

替换＆＃39;点击＆＃39;与＆＃39; on＆＃39;。

 $("body").on("click", ".details1", function(){
 alert('button clicked');
});

第二页不适用于第一页中的代码

1 个答案: