Ma question concerne spécifiquement http://api.jquery.com/event.target/#example-1
Si vous utilisez une étendue dans
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.
example Section1
Section1a Section2
Section2a Section3
Section3a Section4
Section4a name stargazerscount forkscount description
$(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" } ] }); }); }); });
[{ "name": "mango", "stargazerscount": 526, "forkscount": "critical", "description": "fruits" }, { "name": "mobiles", "stargazerscount": 526, "forkscount": "major", "description": "electronics" }, { "name": "mobiles", "stargazerscount": 526, "forkscount": "major", "description": "electronics" } ]