Page1.php
<span class='Clic_function' aria-hidden='true' id='1'></span>
<span class='Clic_function' aria-hidden='true' id='2'></span>
<span class='Clic_function' aria-hidden='true' id='3'></span>
(我有相同的功能按钮,但不同的ID)
当他们用ajax从页面加载时,不起作用
Page2.php
<html>
<input type="button" id="reload">
<div id="box">
<span class='Clic_function' aria-hidden='true' id='1'></span>
<span class='Clic_function' aria-hidden='true' id='2'></span>
<span class='Clic_function' aria-hidden='true' id='3'></span>
</div>
<script>
$(".Clic_function").click(function () {
alert("Hi");
});
$("#reload").click(function () {
$.ajax({
url: "Page1.php",
context: document.body,
}).then(function (result) {
$("#reload").html(result);
}
});
</script>
</html>
只在第一次工作,但当推送重新加载脚本(警报)时不会再次工作,我可以看到页面加载得很好,但脚本号为
您需要将点击事件委托给页面第一次运行时存在的东西-
$(document).on('click', ".Clic_function", function () {
alert("Hi");
});
jQuery在运行时只知道页面中的元素,因此jQuery无法识别添加到DOM中的新元素。为了解决这种使用事件委派的问题,将事件从新添加的项冒泡到页面加载jQuery时DOM中的某个点。许多人使用document
作为捕捉冒泡事件的地方,但没有必要在DOM树上走那么高。理想情况下,您应该委托给页面加载时存在的最近的父级。
您需要使用事件委派并将事件附加到DOM的更高级别。我在示例中将它附加到document
。
$(document).on('click', '.Click_function', function(){
alert("Hi");
});