JQuery вложенное событие div .click

Question

Ссылка #loadContent будет загружать tree.html. После успешной загрузки содержимого сценарий повторно инициализирует некоторые функции, которые находятся в tree.html. Однако я не могу заставить событие .click функционировать в загруженном контенте.

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> 

В tree.html, я не могу получить предупреждение (цель). Однако, если я переместил этот раздел из «div # demo_1» в tree.html, я могу получить предупреждение (цель).

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

Как я могу обнаружить элемент, нажатый в div demo_1? Благодаря

Answer 1

как об этом: удалить скрипт из tree.html

в index.html добавить этот скрипт (предполагается, что вы используете JQuery 1.3+)

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

Answer 2

Вы можете использовать .delegate() или .live() для это:

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

Поместите этот скрипт на свою главную страницу или в внешний файл, в любом случае ... он будет обрабатывать клики, даже если t его дерево загружается позже через AJAX. Он работает, видя событие click, когда он пузырится на DOM .... это происходит так же, как и в текущем или будущем элементах, поэтому не имеет значения, добавлено ли дерево, заменено, обновлено и т. Д. ... оно работает , Когда вы используете .click(), вы привязываетесь к тем элементам, которые существуют в то время (хотя ваш скрипт вообще не работает).

Переход к .delegate() будет гораздо проще подход здесь, и это позволяет поместить все ваши JavaScript вместе во внешнем файле, чтобы сделать жизнь лучше для пользователя, а также :)

Answer 3

После возвращения успеха в индексе. html, событие .onclick должно появиться после инициализации .tree. Звучит странно Я знаю, но это так. Я считаю, что это потому, что onclick является подмножеством .tree, поэтому инициализация должна произойти после этого, а не раньше: S

так что ничего страшного в скрипте , просто измените положение> _ <

$("#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 
}); 

Спасибо всем!