views:

56

answers:

1

I have links in my webpage which get several types of functions linked by jquery.

First, they get the standard behaviour of marking which one is the active link:

$('.buttonlist li a').bind('click',
    function() {
        var li = $(this).parent();
        li.siblings('.aktiv').removeClass('aktiv');
        li.addClass('aktiv');
    }
); 

Second, some of them get an ajaxy behaviour if they are supposed to get it (this can still be the same buttons as the ones above):

$('.ajaxLoad').bind('click',
    function(event) {
        event.preventDefault();
        var url = $(this).attr('href');
        $('.inhaltsblock').load(url);
    }
);

Third: on one special page I need a bit of extra behaviour:

if ($('#ansprechpartnerIntrotext').length > 0) {
    $('.buttonliste li a').bind('click', 
        function() {
            alert("Hello!");
            // Some Magic will happen around here
        }
    );
}

Now, my understanding is that all those events should be triggered where appropriate, whenever a link is clicked, in the order they were bound. Alas, they do not - only the ajaxload (number 2) event is triggered, neither number one nor number three are getting called. Strangely enough the order does not seem to have any influence whatsoever - it is always the ajax-call that's called, none of the others. What am I doing wrong here?

A: 

Why just use one click event and put all the other stuff in a function e.g.

$('button').click(function(){
doClassChange();

if ($('#ansprechpartnerIntrotext').length > 0 && $(this).attr('class') == .ajaxload) {
//do something
}
doAjaxyStuff();

});

Add flags to control what goes on in the click so you can use switches to allow different things to happen.

matpol