Question

我是网络开发的新手，我正在努力了解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）如果我无法在浏览器中看到此代码，那么解决此代码问题的最佳方法是什么？

非常感谢！

Answer 1

如果您确实要将脚本附加到dom，则需要使用appendChild()而不是.html()。 link about appendChild

这样做的一个例子是

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

这是显示此内容的fiddle。

我的动态添加脚本在哪里？

主页

返回代码

更新的DOM - 注意我看不到我的新javascript。

1 个答案: