Utilisation de JQuery event.target pour travailler avec des enfants

Ma question concerne spécifiquement http://api.jquery.com/event.target/#example-1

Si vous utilisez une étendue dans

  • ou une autre balise pour modifier le style tel que comme je l’ai fait ici , cette partie de l’élément ne déclenchera pas le basculement de la fonction JQuery. Comment peut-on s’y prendre pour que cela fonctionne?

    HTML:

     
    • This doesn't work, this does
      • sub item 1-a
      • sub item 1-b
    • item 2
      • sub item 2-a
      • sub item 2-b

    JavaScript:

     function handler(event) { var $target = $(event.target); if( $target.is("li") ) { $target.children("ul").toggle(); } } $("ul").click(handler).find("ul").hide(); 

    Pour continuer à utiliser votre formulaire actuel, je suggérerais d’utiliser le closest() :

     function handler(event) { $(event.target).closest('li').children("ul").toggle(); } $("ul").click(handler).find("ul").hide(); 

    Démo de JS Fiddle .

    Bien que pour ma propre utilisation, je préférerais:

     $('li').on('click', function(e){ e.stopPropagation(); $(this).find('ul').toggle(); }); 

    Démo de JS Fiddle .

    Références:

    • closest() .
    • on() .
  • Un exemple complet des enfants e.target et le plus proche avec des données externes et datables.

    HTML

        example            
    Section1
    Section1a
    Section2
    Section2a
    Section3
    Section3a
    Section4
    Section4a
    name stargazerscount forkscount description

    Javascript

     $(document).ready( function () { var tables=$('#example').DataTable( { "ajax": { "type" : "POST", "url": "http://localhost/example/json/members.json", "dataSrc": function (json) { var return_data = new Array(); for(var i=0;i< json.length; i++){ return_data.push({ 'name': json[i].name, 'stargazerscount' : json[i].stargazerscount, 'forkscount' : json[i].forkscount, 'description' : json[i].description }) $('.overlay').hide(); $(".loader").hide(); } return return_data; } }, "columns": [ { "data": "name" }, { "data": "stargazerscount" }, { "data": "forkscount" }, { "data": "description" } ] }); /*onclick filter*/ $(".outerblock").click(function(e){ $("#testmodal").modal('show'); var item=$(e.target).closest('span').text(); $( ".modalbtn" ).one( "click", function(event) { $(this).off(event); alert(item) var tables=$('#example').DataTable( { "destroy":true, "ajax": { "type" : "POST", "url": "http://localhost/example/json/members.json?id="+item, "dataSrc": function (json) { var return_data = new Array(); for(var i=0;i< json.length; i++){ return_data.push({ 'name': json[i].name, 'stargazerscount' : json[i].stargazerscount, 'forkscount' : json[i].forkscount, 'description' : json[i].description }) $('.overlay').hide(); $(".loader").hide(); } return return_data; } }, "columns": [ { "data": "name" }, { "data": "stargazerscount" }, { "data": "forkscount" }, { "data": "description" } ] }); }); }); $("#example").delegate("tbody tr td:first-child", "click", function(e){ var item=$(e.target).text(); //alert(item); $("#testmodal").modal('show'); $( ".modalbtn" ).one( "click", function(event) { $(this).off(event); alert(item); var tables=$('#example').DataTable( { "destroy":true, "ajax": { "type" : "POST", "url": "http://localhost/example/json/members.json?id="+item, "dataSrc": function (json) { var return_data = new Array(); for(var i=0;i< json.length; i++){ return_data.push({ 'name': json[i].name, 'stargazerscount' : json[i].stargazerscount, 'forkscount' : json[i].forkscount, 'description' : json[i].description }) $('.overlay').hide(); $(".loader").hide(); } return return_data; } }, "columns": [ { "data": "name" }, { "data": "stargazerscount" }, { "data": "forkscount" }, { "data": "description" } ] }); }); }); }); 

    JSON

     [{ "name": "mango", "stargazerscount": 526, "forkscount": "critical", "description": "fruits" }, { "name": "mobiles", "stargazerscount": 526, "forkscount": "major", "description": "electronics" }, { "name": "mobiles", "stargazerscount": 526, "forkscount": "major", "description": "electronics" } ]