当我在 jquery 中使用 load() 函数时，按钮不起作用

Question

当我使用 load() 方法时，加载的文件中的按钮不起作用；主页中的代码；$("html").load("demo.php")demo.php中的代码；<button id="btn">Alert</button><script>var btn = document.getElementById("btn");btn.onclick = function(){alert("Hello")}</script>当我只打开 demo.php 时该按钮工作正常，但当我将其加载到另一个文档中时该按钮不起作用。有什么解决办法吗？当我用 body 选择器替换 html 选择器时，它起作用了$("body").load("demo.php")我发现了一些事情，但仍然没有解释原因。当我使用 Javascript 内联时，它将在主页中工作，如下所示；<button onclick="alert('hello')" id="btn">Alert</button>

Answer 1

请尝试插入 html 的其他元素

$("another selector").load("demo.php")

添加另一个元素到您的首页并使用该元素加载 demo.php

当您加载 demo.php 时，您将从页面中删除 jquery，这就是为什么您什么也得不到的原因

尝试创建另一个元素，正如我上面提到的

$("div").load("demo.php")

Answer 2

当使用不带后缀选择器表达式的 URL 进行调用时，内容将在删除脚本之前.load()传递。.html()这会在脚本块被丢弃之前执行它们。然而，如果.load()使用附加到 URL 的选择器表达式来调用，脚本会在 DOM 更新之前被删除，因此不会被执行。

所以当你打电话时：

$("#buttons").load("demo.php");

这将执行脚本块。您可能需要考虑调整此块以确保它可以更好地与 DOM 配合使用。考虑以下。

<button id="btn">Alert</button>

<script>

$("#buttons").on("click", "#btn", function(e){

  alert("Hello")

});

</script>