jquery .click() seems not to be working

Question

Okay, so I am building a CMS for us here at work and i'm running into an issue where I can't create any of my navigation...

My html navigation looks something like:

<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>

You'll see that there are 2 lists. This pertains to the ul class=sub links...

I have tried:

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

I've also tried adding a class to each of the links ie: class="pages" utilizing this code:

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

and that didn't seem to work either. I am at a loss to figure that out....

Once I get it working I need to figure the following out...

1. remove class='current' from anything in the DOM
2. add class='current' to whatever was clicked.. except in the case of one that has sub-pages under it.. since you click on the sub-page (view all, add new in my code above) it needs to add the class="current" to the parent page ("Pages")...

Here is my entire JS file as of right now...

$().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;
});
});

any assistance is appreciated.

I've figured out why it's not working, now just to fix it...

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

The 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
        }
    }
})
})
};

has the issue.. so remove this line:

d.stopImmediatePropagation();

Once that is done, to add the automatic class changing based on links... add the following right after the first else statement and it should work perfect.

if ($(b).hasClass('menu')) {
$('ul.menu li a').removeClass("current");
}

if ($(b).hasClass('sub')) {
$('ul.sub li a').removeClass("current");
}
$(this).addClass('current');

There is probably a more elegant way to achieve the automatic class changing... but this works... when you click on a part of the main menu, it gets triggered as the current page... then if that item in the main menu has a sub menu, when you click on that it gets triggered as the current page of the sub menu while not degrading the setting of the main menu.

Now only thing to contend with, is if you want two functions such as:

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

and

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

with this, for some reason the menu one works fine, but when you click on the sub, both functions are triggered...

Answer 2

This is probably happening because your processing before the body is loaded. Try something like (*untested)

$( 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
    });
});

Answer 3

You're missing quotes around your class name. Should be this...

<ul class='sub'>

Then this will work:

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

jsFiddle Example