jQuery function for multiple elements with same class

Question

I think I may know the answer to this, but being still fairly new to the world of jQuery I figure I will ask people much smarter than I. My research on the topic led me to the code I have pasted below but it does not work.

Here is the scenario: I have multiple div/ul based dropdowns that have the same class name of course. What I want to happen is when the button for the dropdown is clicked, that you can click inside of the dropdown element without it closing the dropdown. I am assuming that because they all have the same class, the stopPropogation is not working. Here is the jQuery code:

<script type='text/javascript'>
$('.dropdown-menu').each(function(){
    $(this).click(function(event){
        if($(this).hasClass('keep_open')){
         event.stopPropagation();
        }
     });
});
</script>

Here is an example of one of the dropdowns (of which there are more than one). I use Twitter Bootstrap in case you notice the similar class names:

<div class="btn-group">
    <div class="btn btn-mini" tabindex="-1">DROPDOWN NAME</div>
    <div class="btn btn-mini dropdown-toggle" data-toggle="dropdown" tabindex="-1">
        <span class="caret"></span>
    </div>
    <ul class="dropdown-menu dropdown-pad keep-open">
        <li><b>Info:</b> <small>NAME INFO</small></li>
        <li><b>Thoughts:</b> <small>THOUGHT INFO</small></li>
        <li><b>Favorite Places:</b>
            <br><small>FAVORITE PLACE<br>FAVORITE PLACE 2</small>
        </li>
    </ul>
</div>

EDIT So the error is not likely in the jQuery portion, but something in the dropdown div itself. On the same page I use the following variation of the dropdown and it works like a champ:

<div class="btn-toolbar">
    <div class="btn-group">
    <a class="btn dropdown-toggle" href="#" data-toggle="dropdown">
      Department
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu keep_open">
       <li>Customer Service</li>
       <li>Tech Support</li>
    </ul>
    </div>
</div>

There isn't in twitter bootstrap, it's using CSS pseudo class i think — A. Wolff
– A. Wolff, Commented Apr 19, 2013 at 14:07
@roasted I am not sure you completed your thought :) Either that or I did not understand your comment. I do have my own class added in there: 'keep-open'. I utilize this function and this class on another page and it works. I am concerned this does not work because of so many with the same class name. Thanks again for your help. — jcsbrotha
– jcsbrotha, Commented Apr 19, 2013 at 14:17
Where is the function which closes the thing attached. event.stopPropagation() will prevent the event from reaching it only if your listener gets called before it does. Also if it's attached at the same element you need to use stopImmediatePropagation. — Vatev
– Vatev, Commented Apr 19, 2013 at 14:22

A. Wolff · Accepted Answer · 2013-04-19 14:06:11Z

1

Not sure it is related to your problem, but you should wrap your code in document.ready callback function:

$(function(){ //or $(document).ready(function(){
    $('.dropdown-menu').each(function(){
        $(this).click(function(event){
            if($(this).hasClass('keep_open')){
             event.stopPropagation();
            }
         });
    });
 });

answered Apr 19, 2013 at 14:06

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vatev Over a year ago

+1 for noticing that one, I would of probably lost half an hour looking for the reason.

jcsbrotha Over a year ago

@roasted I appreciate the info on this. I did add it in, but to confirm your suspicion, it did not fix the issue :(

Mark Schultheiss · Accepted Answer · 2013-04-19 15:03:15Z

1

Wrap in a document ready but this:

$('.dropdown-menu').each(function(){ $(this).click(function(event){ if($(this).hasClass('keep_open')){ event.stopPropagation(); } }); });

could be simply this:

$('.dropdown-menu').click(function (event) { if ($(this).hasClass('keep_open')) { event.stopPropagation(); } });

final version:

$(document).ready(function(){ $('.dropdown-menu').click(function (event) { if ($(this).hasClass('keep_open')) { event.stopPropagation(); } }); });

alternately:

$('.btn-group').on('click', '.dropdown-menu', function (event) { if ($(this).hasClass('keep_open')) { event.stopPropagation(); } });

EDIT: based on comments you MIGHT need:

$('.btn-group .dropdown-menu .keep_open').children().on('click', function (event) { event.stopPropagation();//or the next one event.stopImmediatePropagation(); });

EDIT2 OMG I am an idiot:

$('.btn-group').on('click', '.dropdown-menu', function (event) {
    if ($(this).hasClass('keep-open')) {
        event.stopPropagation();
    }
});

'keep-open' vs 'keep_open'

edited Apr 19, 2013 at 15:03

answered Apr 19, 2013 at 14:13

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

7 Comments

jcsbrotha Over a year ago

tried both the final version and the alternate version... still not working

Mark Schultheiss Over a year ago

Please describe "still not working" in detail - perhaps you need one of the other propagation management? i.e. event.stopImmediatePropagation() documented api.jquery.com/event.stopImmediatePropagation

jcsbrotha Over a year ago

My sincere apologies. I am notoroious for not being as descriptive as I need to be. by "not working" I mean that when the button is clicked, and the dropdown appears, clicking inside the dropdown area closes the dropdown still. It needs to stay open no matter where inside the dropdown I click.

jcsbrotha Over a year ago

and I did try the stopImmediatePropagation and it produced the same result, i.e. closes the dropdown when clicking inside of the dropdown.

Mark Schultheiss Over a year ago

I added another possibility - the children might be managing the click - hard to tell but something you might work with - NOT a complete solution as you MIGHT need to detect the propagation stoppage in the parent (original) to properly manage.

|

rigobcastro · Accepted Answer · 2013-04-19 14:13:54Z

0

For multiple elements and live event, use .on() attached to an element below the level of document.body:

$(document).on('click', '.dropdown-menu', function(e){
    $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional.
});

Don't need use $(document).ready()

answered Apr 19, 2013 at 14:13

rigobcastro

1,25711 silver badges18 bronze badges

Comments

jcsbrotha · Accepted Answer · 2013-04-19 16:08:44Z

0

I figured it out. Thanks to @Mark Schultheiss, it eventually clicked what was going on. The original jQuery worked, however, the first type of dropdown which did not work had a class of keep-open instead of keep_open. That is why the second style of dropdown worked and not the first one. Tested it and it works now. Thank you all for your help!

answered Apr 19, 2013 at 16:08

jcsbrotha

993 silver badges15 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:28:55Z

0

Having the same problem as this user but these solutions are not working: Twitter Bootstrap cant stop a dropdown from closing on click

Decided to open up a separate question rather than this old one in case the issue is different for newer builds.

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Aug 19, 2013 at 4:08

srt8driver

4914 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery function for multiple elements with same class

5 Answers 5

2 Comments

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related