Evénement div.click imbriqué Jquery

Question

Le lien #loadContent chargera tree.html. Après avoir chargé le contenu, le script réinitialise certaines fonctions qui se trouvent dans tree.html. Toutefois, je ne parviens pas à faire fonctionner l'événement .click dans le contenu chargé.

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> 

En tree.html, je suis incapable d'obtenir l'alerte (cible). Cependant, si j'ai déplacé cette section du "div # demo_1" dans tree.html, je peux recevoir l'alerte (target).

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

Comment puis-je détecter l'élément cliqué dans la démo_1? Merci

Answer 1

que diriez-vous: supprimer le script de tree.html

dans ce script ajouter index.html (en supposant que vous utilisez jquery 1.3+)

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

Answer 2

Vous pouvez utiliser .delegate() ou pour .live() cela:

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

Placez ce script dans votre page principale ou un fichier externe, de toute façon ... il va gérer les clics, même si t L'arbre est chargé plus tard via AJAX. Cela fonctionne en voyant l'événement click quand il gonfle le DOM .... ceci se passe de la même manière sur les éléments actuels ou futurs, donc peu importe si l'arbre est ajouté, remplacé, mis à jour, etc ... ça marche . Lorsque vous utilisez .click() vous liez les éléments qui existent à ce moment-là (bien que votre script ne semble pas être en cours d'exécution du tout).

Changement de .delegate() serait une approche beaucoup plus simple ici, et il vous permet de mettre tous vos javascript ensemble dans un fichier externe pour rendre la vie meilleure pour votre utilisateur ainsi :)

Answer 3

En cas de réussite de retour dans l'index. html, l'événement .onclick doit venir après l'initialisation de .tree. Ça sonne bizarre je sais, mais ça fonctionne de cette façon .. Je crois que c'est parce que l'onclick est un sous-ensemble du .tree, donc l'initialisation doit venir après et pas avant: S

donc, rien de mal avec le script , il suffit de changer la 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 
}); 

Merci à tous!