CODEWITHSUNDEEP
jqueryfirefoxwebkitclickdrop-down-menu
HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

jquery document click function only working in Firefox

I'm using dropkick.js to style a select menu. I am trying to make the menu close when you click anywhere outside of the menu. But the removeClass() ( and the document.click() ) are only working on firefox. In webkit, the menu does not close by clicking outside or anywhere else in the document.

Removing the ".dk_open" and ".dk_focus" classes returns the element back to display:none, thereby hiding the menu.

Does anyone see anything that might be causing this inconsistency? Thanks!

        $('.wpcf7 select').dropkick();

        var $dkopen = $('.dk_open');

        $(document).click(function(){
            $dkopen.removeClass('dk_open dk_focus');
        });

        $dkopen.click(function(){
            e.stopPropagation();
        });

Upvotes: 0

Views: 654

Answers (4)

Anca
Anca

Reputation: 55

You need to add tabindex to each select. After that it will work. Good luck!

Upvotes: 0

vitaly87
vitaly87

Reputation: 306

Just faced the same issue.

Here is a relevant link talking about this: https://github.com/JamieLottering/DropKick/issues/45

Your solution (Corey Aubuchon) does 'work'... in that:

When you click 'Outside' the dropdown, it DOES close...However...

Now, when you click 'Inside' the dropdown (which would be clicking on: "dk_container' or 'dk_toggle') — the dropdown DOES NOT close...

(And, I'm not talking about selecting an 'option' here, what I'm talking about clicking on the same 'down' arrow you click to see the options in the first place)

I'm not a JS developer, I merely combined the solution found here, with the solution from the referenced link, into something that did not give me errors. Somehow it worked though.

Anyway, Try this instead...this works in Chrome, IE, + FF (you can click inside or outside, in every case it will work :)

    $(document).click(function(){$('.dk_open').removeClass('dk_open');});
    $('dk_open').on('click',function(e){e.stopPropagation();});
    $('.dk_container, .dk_toggle').on('click',function(e){var$dk=$(this).parents('.dk_container').first();{$('.dk_open').removeClass('dk_open');$dk.toggleClass('dk_open');}return false;});

..or... if you prefer... This is the NOT minified version:

    $(document).click(function(){
        $('.dk_open').removeClass('dk_open');
    });
    $('.dk_open').on('click',function (e) {
        e.stopPropagation();
    });
    $('.dk_container, .dk_toggle').on('click',function (e) {

        var $dk  = $(this).parents('.dk_container').first();

        if ( $.browser.webkit ){
            $('.dk_open').removeClass('dk_open');
                $dk.toggleClass('dk_open');
        }
        return false;
    });

Upvotes: 0

Corey Aubuchon
Corey Aubuchon

Reputation: 21

This could use some cleaning up but it worked to solve the issue of drop downs not closing as expected to match native select functionality.

$(document).click(function(){
    $('.dk_open').removeClass('dk_open');
});

$('.dk_open').live('click',function(e){
    e.stopPropagation();
});

$('.dk_container, .dk_toggle').live('click', function(e){
     $('.dk_open').removeClass('dk_open');
});

Added the last event handler to close any open drop downs when selecting another.

Upvotes: 2

CronosS
CronosS

Reputation: 3159

I don't know if this is the cause of your problem, but you should try to add a reference to the event in your click function:

 $dkopen.click(function(e /*<-- here*/){
     e.stopPropagation();
 });

Upvotes: 0

Related Questions