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

Does it work if you remove $(document).ready() (not sure if this event is fired when you insert into an existing DOM)? And although jQuery tries to guess the data type returned, maybe you should explicitly state the data type in your Ajax call: dataType: html — Felix Kling
– Felix Kling, Commented May 27, 2010 at 10:52

Nick Craver · Accepted Answer · 2010-05-27 11:35:43Z

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

answered May 27, 2010 at 11:35

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sylph Over a year ago

Hi, thanks for your answer, but it's not working, finally found the reason why. Will post it up :)

Ramuns Usovs · Accepted Answer · 2010-05-27 10:57:23Z

0

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>

answered May 27, 2010 at 10:57

Ramuns Usovs

1,45411 silver badges10 bronze badges

1 Comment

Sylph Over a year ago

Hi, thanks for your answer, you are right, the script has to be in index.html, but the main reason it didn't work at the first place is quite funny. Will post the answer up :)

Sylph · Accepted Answer · 2010-05-31 03:22:01Z

0

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!

answered May 31, 2010 at 3:22

Sylph

1,4954 gold badges27 silver badges36 bronze badges

Collectives™ on Stack Overflow

Jquery nested div .click event

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related