Javascript - Le gestionnaire de clic ignoré/sautée

Question

J'ai le morceau de code ci-dessous:

$(document).ready(function(){ 
     var rebuild = getParameterByName("rebuild"); 

     var createdStructures = $('#AtoZContentDiv').children().length; 


     if ((rebuild !== undefined && rebuild !== null && rebuild.indexOf("true") === 0) || (createdStructures === 0)) 
     { 
      // clean up pre-existing data 
      cleanUp(); 


      // create container structure 
      createFormLinkContainers(); 

      // Call SP web services to retrieve the information and create the A to Z 
      retrieveListData(); 

      completeInitialization(); 
     } 
     else 
     { 
      aggregateAll = jQuery.parseJSON($('#hdnAggregateAll').val()); 
      aggregatePersonal = jQuery.parseJSON($('#hdnAggregatePersonal').val()); 
      aggregateBusiness = jQuery.parseJSON($('#hdnAggregateBusiness').val()); 
      ministryAggregate = jQuery.parseJSON($('#hdnMinistryAggregate').val()); 
      caAggregate = jQuery.parseJSON($('#hdnCAAggregate').val()); 
      sTaxAggregate = jQuery.parseJSON($('#hdnSTaxAggregate').val()); 
      bTaxAggregate = jQuery.parseJSON($('#hdnBTaxAggregate').val()); 
      leTaxAggregate = jQuery.parseJSON($('#hdnLETaxAggregate').val()); 

      var type = getParameterByName("filter"); 

     $("#tab-all").click(function() 
     { 
       loadit('all'); 
     });   


     $("#tab-business").click(function() 
     { 
      loadit('business'); 
     }); 

     $("#tab-personal").click(function() 
     { 

     }); 


     $(document).on('click','#tab-personal',function(e){ 
     loadit('personal');  
     }); 


       buildFilterMenu(); 
       loadit('all'); 
     } 
    }); 

J'ai essayé d'utiliser les deux:

$(document).on('click','#tab-personal',function(e){ 
loadit('personal');  
}); 

et

$("#tab-personal").click(function() 
{ 

}); 

et quand je placer un point d'arrêt à l'intérieur de l'un d'entre eux, aucun n'est touché.

HTML:

<div id="tabs" style="display: inline-block;"> 
    <ul><li><a class="selected" id="tab-all" href="#" type="all"><b>All Forms</b></a></li> 
    <li><a id="tab-business" href="#" type="business"><b>Business</b> </a></li> 
    <li><a id="tab-personal" href="#" type="personal"><b>Personal</b> </a></li></ul> 
</div> 

complet Code: http://pastebin.com/vzLPX3cU

Pourquoi est-ce qui se passe?

Answer 1

$(document).ready(function(){ 
    var rebuild = getParameterByName("rebuild"); 
    var createdStructures = $('#AtoZContentDiv').children().length; 
    if ((rebuild !== undefined && rebuild !== null && rebuild.indexOf("true") === 0) || (createdStructures === 0)){ 
     // clean up pre-existing data 
     cleanUp(); 

     // create container structure 
     createFormLinkContainers(); 

     // Call SP web services to retrieve the information and create the A to Z 
     retrieveListData(); 
     completeInitialization(); 
    }else{ 
     aggregateAll = jQuery.parseJSON($('#hdnAggregateAll').val()); 
     aggregatePersonal = jQuery.parseJSON($('#hdnAggregatePersonal').val()); 
     aggregateBusiness = jQuery.parseJSON($('#hdnAggregateBusiness').val()); 
     ministryAggregate = jQuery.parseJSON($('#hdnMinistryAggregate').val()); 
     caAggregate = jQuery.parseJSON($('#hdnCAAggregate').val()); 
     sTaxAggregate = jQuery.parseJSON($('#hdnSTaxAggregate').val()); 
     bTaxAggregate = jQuery.parseJSON($('#hdnBTaxAggregate').val()); 
     leTaxAggregate = jQuery.parseJSON($('#hdnLETaxAggregate').val()); 

     var type = getParameterByName("filter"); 
      buildFilterMenu(); 
      loadit('all'); 
    } 
    $("#tab-all").click(function(){ 
      loadit('all'); 
    });   

    $("#tab-business").click(function(){ 
     loadit('business'); 
    }); 

    $(document).on('click','#tab-personal',function(e){ 
     loadit('personal');  
    }); 
}); 

Answer 2

cela se produit car vous n'avez pas désactivé le comportement par défaut de l'élément d'ancrage. sur l'événement cliquez sur Arrêter le comportement par défaut avec event.preventDefault()

quelque chose comme ça

$("#tab-personal").click(function(event){ 
    event.preventDefault(); # this will prevent the default behavior 
    # do something 
}); 

comme il est déjà à l'intérieur fonction ready() vous ne devez pas envelopper dans une fonction plus prêt