3

我是 Web 开发的新手，我正在尝试了解 DOM 的工作原理。

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

请参阅下面的代码。

主页

<!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) 如果我在浏览器中看不到此代码，最好的解决方法是什么？

非常感谢！

4

1 回答 1

2

如果您真的想将脚本附加到您需要使用的 dom 中appendChild()not .html()。关于 appendChild 的链接

这样做的一个例子是

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

这是一个显示这一点的小提琴。

于 2013-01-04T07:16:40.240 回答