Jquery nested div .click event
- by Sylph
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> </ins>Root node 1</a>
<ul>
<li id="phtml_2"><a href="#"><ins> </ins>Child node 1</a></li>
<li id="phtml_3"><a href="#"><ins> </ins>Child node 2</a></li>
<li id="phtml_4"><a href="#"><ins> </ins>Some other child node with longer text</a></li>
</ul>
</li>
<li id="phtml_5"><a href="#"><ins> </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> </ins>Root node 1</a>
<ul>
<li id="phtml_2"><a href="#"><ins> </ins>Child node 1</a></li>
<li id="phtml_3"><a href="#"><ins> </ins>Child node 2</a></li>
<li id="phtml_4"><a href="#"><ins> </ins>Some other child node with longer text</a></li>
</ul>
</li>
<li id="phtml_5"><a href="#"><ins> </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
