Jquery nested div .click event

Question

The link #loadContent will loads tree.html. Upon success loading the content, the script reinitialize some functions which is in tree.html. However, I am unable to get the .click event to function in the loaded content.

Index.html

<a href="#" id="loadContent">Load</a>
 <script type="text/javascript">
      $(function() {
                    $("#loadContent").click(function() {
                      $.ajax({
                    url: "tree.html"
                    ,success: function(data) {
                    $('#result').html(data);
                    $("#demo_1").tree({
            rules : {
                use_max_children : false,
                use_max_depth : false
            },
            callback : {
                onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
                    alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
                }
            }
        });
                    }
                    });
                });
            });
  </script>
  <script type="text/javascript" class="source">
    $(function () { 
        $.tree.drag_start = function () {
            $("#log").append("<br />Drag start ");
        };
        $.tree.drag = function () {
            $("#log").append(" .");
        };
        $.tree.drag_end = function () {

            $("#log").append(" Drag end<br />");
        };
        $("#demo_1").tree({
            rules : {
                use_max_children : false,
                use_max_depth : false
            },
            callback : {
                onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
                    alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
                }
            }
        });

        $("#demo_2").tree({
            rules : {
                use_max_children : false,
                use_max_depth : false
            },
            callback : {
                onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
                    alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
                }
            }
        });

    });
    </script>

<div class="demo" id="demo_2">
  <ul>
    <li id="phtml_1" class="open"><a href="#"><ins>&nbsp;</ins>Root node 1</a>
    <ul>
      <li id="phtml_2"><a href="#"><ins>&nbsp;</ins>Child node 1</a></li>
      <li id="phtml_3"><a href="#"><ins>&nbsp;</ins>Child node 2</a></li>
      <li id="phtml_4"><a href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li>
    </ul>
    </li>
    <li id="phtml_5"><a href="#"><ins>&nbsp;</ins>Root node 2</a></li>

  </ul>


</div>

<div id="result"></div><br>
<div id="log"></div>

Tree.html

<div class="demo" id="demo_1">
  <ul>
    <li id="phtml_1" class="open"><a href="#"><ins>&nbsp;</ins>Root node 1</a>
    <ul>
      <li id="phtml_2"><a href="#"><ins>&nbsp;</ins>Child node 1</a></li>
      <li id="phtml_3"><a href="#"><ins>&nbsp;</ins>Child node 2</a></li>
      <li id="phtml_4"><a href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li>
    </ul>
    </li>
    <li id="phtml_5"><a href="#"><ins>&nbsp;</ins>Root node 2</a></li>
    <li><a class="preset_text" id="1">model 1</a> </li>
    <li><a class="preset_text" id="2">model 2</a></li>
  </ul>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.preset_text').click(function(){         
            var target = $(this).attr("id");            

            alert(target);
        });
    });
</script>

In tree.html, I am unable to get the alert(target). However, If I moved this section out from the "div #demo_1" in tree.html, I am able to receive alert(target).

<a class="preset_text" id="1">model 1</a> 
<a class="preset_text" id="2">model 2</a>

How can I get to detect the item clicked in the div demo_1 ? Thanks

Answer 1

how about this: remove the script from tree.html

in index.html add this script (assuming you use jquery 1.3+)

<script type="text/javascript">
$(function(){
   $('#result .preset_text').live('click',function(){
     var target = $(this).attr("id");            
     alert(target);
   });
});
</script>

Answer 2

You can use .delegate() or .live() for this:

$(function() {
  $('#result').delegate('.preset_text', 'click', function() {
    var target = $(this).attr("id");
    alert(target);
  });
});

Place this script in your main page or an external file, either way...it'll handle the clicks, even though the tree is loaded later through AJAX. It works off seeing the click event when it bubbles up the DOM....this happens the same way on current or future elements, so it doesn't matter if the tree is added, replaced, updated, etc...it works. When you use .click() you're binding to the elements that exist at that time (though your script doesn't appear to be running at all).

Changing to .delegate() would be a much simpler approach here, and it allows you to put all your javascript together in an external file to make life better for your user as well :)

Answer 3

Upon return success in index.html, the .onclick event has to come after the initialization of .tree. Sounds weird I know, but it works that way.. I believe it's because the onclick is a subset of the .tree , thus the initialization has to come after that and not before :S

so, nothing wrong with the script, just change the position >_<

$("#subtopic_tree").tree({
rules : {
use_max_children : false,
use_max_depth : false
},
callback : {
onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
}
}
});

$('.addResource').click(function(){

//action to do here
});

Thanks all!