jquery .click() ne semble pas fonctionner

Question

Bon, alors je construis un CMS pour nous ici au travail et je me heurte à un problème où je ne peux pas créer de navigation ...

Ma navigation HTML ressemble à quelque chose comme:

<ul class="menu collapsible shadow-bottom"> 
        <li> 
         <a href="dashboard.html" class=current> <img src="<?php echo base_url(); ?>inc/images/icons/packs/fugue/16x16/dashboard.png"> Dashboard</a> 
        </li> 

        <li> 
         <a href="javascript:void(0);"> <img src="<?php echo base_url(); ?>inc/images/icons/packs/fugue/16x16/blue-document-copy.png"> Pages</a> 
         <ul class=sub> 
          <li> 
           <a href="list_block.html"> View All</a> 
          </li> 
          <li> 
           <a href="list_shortcut.html"> Create New</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 

Vous verrez qu'il ya 2 listes. Cela se rapporte à la classe ul = liens sous ...

J'ai essayé:

$('.sub li a').click(function() { alert('something'); return false; }); 

J'ai aussi essayé d'ajouter une classe à chacun des liens iE: class = "pages" en utilisant ce code :

$('.pages').click(function() { alert('something'); return false; }); 

et cela ne semble pas fonctionner non plus. Je suis à une perte de comprendre cela ....

Une fois que je l'obtiens, je travaille besoin de comprendre ce qui suit à ...

1. supprimer class = « courant » de quoi que ce soit dans les DOM
2. ajouter class = 'current' à tout ce qui a été cliqué .. sauf dans le cas d'une sous-page ... puisque vous cliquez sur la sous-page (voir tout, ajouter un nouveau dans mon code ci-dessus) pour ajouter le class = "current" à la page parente ("Pages") ...

Voici mon fichier JS entier en ce moment ...

$().ready(function() { 
$('.loader').hide(); 

var validateloginform = $("#login-form").validate({ 
    submitHandler: function(e) { 
     $(e).parent().parent().fadeOut('slow'); 
     $('.loader').fadeIn('slow'); 
     setTimeout(function() { 
      $.ajax({ 
       url: $('#login-form').attr('action'), 
       type: 'POST', 
       data: $('#login-form').serialize(), 
       success: function(response) { 
        var obj = $.parseJSON(response); 
        if (obj.type == 'error') { 
         $('.loader').fadeOut(); 
         $(e).parent().parent().fadeIn(); 
         $('#login-form').alertBox(obj.msg, {type: 'error'}); 
        } 
        if (obj.type == 'success') { 
         window.location.replace(obj.msg); 
        } 
       } 
      })}, 3000 
     ); 
    }, 
    invalidHandler: function(form, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 ? 
      'You missed 1 field. It has been highlighted.' : 
      'You missed '+ errors + ' fields. They have been highlighted.'; 
      $('#login-form').removeAlertBoxes(); 
      $('#login-form').alertBox(message, {type: 'error'}); 
     } 
    } 
}) 

$('.logout').click(function() { 
    $.ajax({ 
     url: 'auth/logout', 
     type: 'POST', 
     success: function(response) { 
      window.location.reload(true); 
     } 
    }) 
    return false; 
}); 

$('.pages').click(function() { 
    alert('nope'); 
    return false; 
}); 
}); 

toute aide est appréciée.

J'ai compris pourquoi il ne fonctionne pas, maintenant juste pour le fixer ...

jQuery.fn.initMenu=function(){ 
return this.each(function(){ 
    var a=$(this).get(0); 
    $("li:has(ul)",this).each(function(){ 
     $(">a",this).append("<span class='arrow'></span>") 
    }); 
    $(".sub",this).hide(); 
    $("li.expand > .sub",this).show(); 
    $("li.expand > .sub",this).prev().addClass("active"); 
    $("li a",this).click(function(d){ 
     d.stopImmediatePropagation(); 
     var c=$(this).next(); 
     var b=this.parentNode.parentNode; 
     if($(this).hasClass("active-icon")){ 
      $(this).addClass("non-active-icon"); 
      $(this).removeClass("active-icon") 
     }else{ 
      $(this).addClass("active-icon"); 
      $(this).removeClass("non-active-icon") 
     } 
     if($(b).hasClass("noaccordion")){ 
      if(c[0]===undefined){ 
       window.location.href=this.href 
      } 
      $(c).slideToggle("normal",function(){ 
       if($(this).is(":visible")){ 
        $(this).prev().addClass("active") 
       }else{ 
        $(this).prev().removeClass("active"); 
        $(this).prev().removeClass("active-icon") 
       } 
      }); 
      return false 
     }else{ 
      if(c.hasClass("sub")&&c.is(":visible")){ 
       if($(b).hasClass("collapsible")){ 
        $(".sub:visible",b).first().slideUp("normal",function(){ 
         $(this).prev().removeClass("active"); 
         $(this).prev().removeClass("active-icon") 
        }); 
        return false 
       } 
       return false 
      } 
      if(c.hasClass("sub")&&!c.is(":visible")){ 
       $(".sub:visible",b).first().slideUp("normal",function(){ 
        $(this).prev().removeClass("active"); 
        $(this).prev().removeClass("active-icon") 
       }); 
       c.slideDown("normal",function(){ 
        $(this).prev().addClass("active") 
       }); 
       return false 
      } 
     } 
    }) 
}) 
}; 

Answer 1

Le code:

jQuery.fn.initMenu=function(){ 
return this.each(function(){ 
var a=$(this).get(0); 
$("li:has(ul)",this).each(function(){ 
    $(">a",this).append("<span class='arrow'></span>") 
}); 
$(".sub",this).hide(); 
$("li.expand > .sub",this).show(); 
$("li.expand > .sub",this).prev().addClass("active"); 
$("li a",this).click(function(d){ 
    d.stopImmediatePropagation(); 
    var c=$(this).next(); 
    var b=this.parentNode.parentNode; 
    if($(this).hasClass("active-icon")){ 
     $(this).addClass("non-active-icon"); 
     $(this).removeClass("active-icon") 
    }else{ 
     $(this).addClass("active-icon"); 
     $(this).removeClass("non-active-icon") 
    } 
    if($(b).hasClass("noaccordion")){ 
     if(c[0]===undefined){ 
      window.location.href=this.href 
     } 
     $(c).slideToggle("normal",function(){ 
      if($(this).is(":visible")){ 
       $(this).prev().addClass("active") 
      }else{ 
       $(this).prev().removeClass("active"); 
       $(this).prev().removeClass("active-icon") 
      } 
     }); 
     return false 
    }else{ 
     if(c.hasClass("sub")&&c.is(":visible")){ 
      if($(b).hasClass("collapsible")){ 
       $(".sub:visible",b).first().slideUp("normal",function(){ 
        $(this).prev().removeClass("active"); 
        $(this).prev().removeClass("active-icon") 
       }); 
       return false 
      } 
      return false 
     } 
     if(c.hasClass("sub")&&!c.is(":visible")){ 
      $(".sub:visible",b).first().slideUp("normal",function(){ 
       $(this).prev().removeClass("active"); 
       $(this).prev().removeClass("active-icon") 
      }); 
      c.slideDown("normal",function(){ 
       $(this).prev().addClass("active") 
      }); 
      return false 
     } 
    } 
}) 
}) 
}; 

a la question .. donc supprimer cette ligne:

d.stopImmediatePropagation(); 

Une fois cela fait, pour ajouter le changement de classe automatique basé sur des liens ... ajouter le suivant juste après la première déclaration d'autre et il devrait fonctionner parfaitement. Il y a probablement un moyen plus élégant de réaliser le changement de classe automatique ... mais cela fonctionne ...lorsque vous cliquez sur une partie du menu principal, il se déclenche comme la page en cours ... alors si cet élément dans le menu principal a un sous-menu, lorsque vous cliquez dessus, il se déclenche comme la page courante du sous-menu tout en ne dégradant pas le réglage du menu principal.

Maintenant seule chose à faire face, est de savoir si vous voulez deux fonctions telles que:

$('.menu li a').click(function() {}); 

et

$('.sub li a').click(function() {}); 

ce, pour une raison quelconque le menu un fonctionne très bien, mais quand vous cliquez sur le sous-marin, les deux fonctions sont déclenchées ...

Answer 2

vous manque des guillemets autour de votre nom de classe. Ce devrait être ...

<ul class='sub'> 

Alors cela va fonctionner:

$('.sub li a').click(function() { alert('something'); return false; }); 

jsFiddle Example

Answer 3

Cela se produit probablement parce que votre traitement avant que le corps est chargé. Essayez quelque chose comme (* non testé)

$(function () { 
    //after body load do ... 

    // validation 

    // logout 

    // and navigation click 
    // if you were to manipulate the html/dom you would also need to use jQuerys live 

    $('.pages').live('click', function (e) { 
     // do something when clicked 
    }); 
});