gpt4 book ai didi

html - 我动态添加的脚本去哪里了?

转载 作者:可可西里 更新时间:2023-11-01 13:36:58 25 4
gpt4 key购买 nike

我是网络开发的新手,我想了解 DOM 的工作原理。

我有一个包含 2 个按钮和一些文本的基本页面。其中一个按钮调用了 Jquery 的 Get 函数。我的服务器也返回一些带有一些脚本的 html。然后将其添加到我的主页上的 DIV 中,该主页的 ID 为“content”

请参阅下面的代码。

主页

<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>

<h1>My Main Page </h1>


<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>

<div id="content">
</div>

</body>
</html>

<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){

$(".alertmsg").click(function() {
alert("Hello World!");
});

$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});

});
</script>

代码返回

<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>

<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});

});
</script>

更新的 DOM - 请注意我的新 javascript 未显示。

<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>

<h1>My Main Page </h1>


<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>

<div id="content">
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
</div>
</body>
</html>

<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){

$(".alertmsg").click(function() {
alert("Hello World!");
});

$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>

我想了解的是;

1) 我的新脚本代码在哪里?

<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>

它只在内存中而不在 DOM 中吗?

2) 我可以获得正确显示的警告,即 $(".showmsg").click触发并显示预期内容。所以我的脚本可以引用 DOM 中所需的现有库。这是如何工作的?

3) 如果我在浏览器中看不到这段代码,最好的解决方法是什么?

非常感谢!

最佳答案

如果您真的想将脚本附加到 dom,则需要使用 appendChild() 而不是 .html()link about appendChild

这样做的一个例子是

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.text = 'alert("test");';
$('div')[0].appendChild(script);

这是一个fiddle显示这个。

关于html - 我动态添加的脚本去哪里了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14152454/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com