Two .click methods interfering with each other?

Question

I have two .click methods and i'm not sure why they will only work in the absence of each other.

The code:

1 Responsible for sliding and hiding content

 var clickAction = function(){
        settings.tabHandle.click(function(event){
            if (obj.hasClass('open')) {
                slideIn();
            } else {
                slideOut();
            }
        });

        clickScreenToClose();
    };

2 Responsible for selectively reloading a div

$(
function(){
    var jContent = $( "#simplecart_items" );
    $( "a" ).click(
        function( objEvent ){
            var jLink = $( this );
            jContent.load( jLink.attr( "href" ) );
            return( false );                    
        }
        );

}
);

Any ideas?

`$( "a" ).click(` is very general and could easily be mixed up. Please add your markup. Where do you define `settings.tabHandle`? — jtheman, Jun 18 '13 at 23:32
I'd suppose the `return false` in one click handler is preventing the other click handler from being triggered. — Blazemonger, Jun 18 '13 at 23:35
@jtheman You're correct, the full code is kind of long: http://stackoverflow.com/questions/12749856/allow-only-1-slideout-at-a-time — , Jun 18 '13 at 23:42
@Blazemonger No console errors, just not being able to click the first piece of code with the second present — , Jun 18 '13 at 23:43
And the docs to back up @Blazemonger - http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — Sumo, Jun 18 '13 at 23:43
@Blazemonger Sweet, thanks for the direction. I used the alternative e.preventDefault(); instead of return (false); and both methods work. — , Jun 19 '13 at 00:06

score 3 · Accepted Answer · answered Jun 18 '13 at 23:59

Try replacing return( false ); in number 2 with objEvent.preventDefault();

jQuery.on()

Event handlers in jQuery can prevent bubbling using a return value of false, or by calling these methods on the event object: event.preventDefault(), event.stopPropagation(), and event.stopImmediatePropagation()

event.preventDefault() stops the browser from performing it's default action for the event, e.g. form submit, navigation...

event.stopPropagation() stops jQuery from calling handlers attached to nodes further up the DOM. Handlers attached at the same level will still be called.

event.stopImmediatePropagation() stops all handlers from being called.

Returning false from an event handler automatically calls event.stopPropagation() and event.preventDefault()

Thanks Patrick, that's exactly what I ended up doing. Worked like a charm. Info is much appreciated! — , Jun 19 '13 at 00:08

Two .click methods interfering with each other?

1 Responsible for sliding and hiding content

2 Responsible for selectively reloading a div

1 Answers1