当我在 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&nbsp;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){&nbsp; alert("Hello")});</script>