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

Question

当我使用 load(( 方法时，加载的文件中的按钮不起作用;

主页中的代码;

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

演示中的代码.php;

<button id="btn">Alert</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("Hello")
}
</script>

当我只打开演示时，该按钮工作正常.php但当我将其加载到另一个文档中时不起作用。 有什么解决办法吗？

---

当我用正文选择器替换 html 选择器时，它可以工作

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

---

我发现了一些东西，但仍然没有解释原因。 当我内联使用 Javascript 时，它将像这样在主页中工作;

<button onclick="alert('hello')" id="btn">Alert</button>

Answer 1

请尝试其他元素而不是html

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

在您的第一页中添加另一个 elemnt 并使用该 elemnt 加载演示.php

当你加载演示时.php你正在从你的页面中删除jquery，这就是为什么你什么也得不到。

尝试创建我上面提到的另一个 elemnt

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

Answer 2

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

因此，当您致电：

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

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

<button id="btn">Alert</button>
<script>
$("#buttons").on("click", "#btn", function(e){
alert("Hello")
});
</script>