CODEWITHSUNDEEP
javascriptjquerysemantic-ui
Peege151
Peege151

Reputation: 1560

Hidden Content and Jquery 2 Clicks to Fire

I know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).

I have a jquery event:

$(document).ready(function () {
    $('.ui.contact.selection.dropdown').on("click", function () {
         $(this).dropdown()
         ;
    })

});

The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with

    $('.item.contact').on("click", function () {
        $('.ui.modal')
          .modal('show')
          ;
    })

The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!

Please see the jsfiddle

Upvotes: 0

Views: 60

Answers (3)

Dylan Corriveau
Dylan Corriveau

Reputation: 2557

Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:

$(document).ready(function () {

    ...

    $('.ui.contact.selection.dropdown').dropdown();
    $('.ui.contact.selection.dropdown').on("click", function () {
        $(this).behavour("toggle");
    });
});

This event will handle not only open, but also close.

JSFiddle

Upvotes: 0

Slippery Pete
Slippery Pete

Reputation: 3110

Try setting the show option when you create the dropdown:

$(this).dropdown('show', true)

Fiddle: http://jsfiddle.net/o8r0fzfg/8/

Upvotes: 2

Raja CSP
Raja CSP

Reputation: 172

I tried the code below and it works!

$(document).ready(function () {    
    $('.ui.contact.selection.dropdown').dropdown();    

    //CONTACT MODAL
    $('.item.contact').on("click", function () {
        $('.ui.modal').modal('show');       
    });    
});

I believe the "dropdown" should be fired on pre-loading.

Upvotes: 0

Related Questions