3

I'm new to web development and I'm trying to understand how the DOM works.

I have a basic page with 2 buttons and some text. One of the buttons does a call to Jquery's Get function. My server returns some html with some script as well. Which is then added to my DIV on my main page which has an ID of 'content'

See below for the code.

Main Page

<!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>

Code Returned

<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>

The Updated DOM - notice that my new javascript aren't seen.

<!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>

What I'm trying to understand is;

1) Where does my new script code exist? 

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

is it in memory only and not in the DOM?

2) I can get the warning to show correctly i.e $(".showmsg").click fires and shows what is expected. So my my script can reference the existing libraries in the DOM which are needed. How does this work?

3) What is the best way to trouble shoot this code if I cannot see it in my browser?

Many thanks!

user1768233
  • 1,409
  • 3
  • 20
  • 28

1 Answers1

2

If you really want to append the script to the dom you need to use appendChild() not .html(). link about appendChild

An example of doing this would be

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

Here is a fiddle showing this.

Blake Plumb
  • 6,779
  • 3
  • 33
  • 54
  • Thanks Blake. I'll try that. However I guess I'm trying to under how it all works. The method I'm using works, i.e the event handling is working fine, I'm just trying to understand how it all fits together. – user1768233 Jan 04 '13 at 07:22
  • @user1768233 Check out this [question](http://stackoverflow.com/questions/610995/jquery-cant-append-script-element) for a great explanation of this. – Blake Plumb Jan 04 '13 at 07:28
  • Thanks Blake. Thats what I was after :) – user1768233 Jan 04 '13 at 07:41