我有一个主页面,当文档准备好时我通过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>
这是我用classname captcha加载到div的第二页:
第二页代码:
<html>
<head>
</head>
<body>
<section class="details1"> Details </section>
</body>
</html>
当您需要即时创建新元素时,您无法使用标准点击等事件。动态创建的元素不具有与现有元素相同的事件处理程序。您必须将事件处理程序动态附加到新创建的元素。
将'click'替换为'on'。
$("body").on("click", ".details1", function(){
alert('button clicked');
});