当按钮从ajax调用时,jquery不起作用



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");
});

相关内容

  • 没有找到相关文章

最新更新