3

私は Web 開発が初めてで、DOM の仕組みを理解しようとしています。

2 つのボタンといくつかのテキストを含む基本的なページがあります。ボタンの 1 つは、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 に答える