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, Apr 19 '13 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, Apr 19 '13 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, Apr 19 '13 at 14:22

score 1 · Answer 1 · answered Apr 19 '13 at 14:06

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 '13 at 14:06

A. Wolff

74,033
9
94
155

+1 for noticing that one, I would of probably lost half an hour looking for the reason. – Vatev Apr 19 '13 at 14:08
@roasted I appreciate the info on this. I did add it in, but to confirm your suspicion, it did not fix the issue :( – jcsbrotha Apr 19 '13 at 14:18

Mark Schultheiss · Answer 2 · 2013-04-19T15:03:15.310

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 '13 at 15:03

answered Apr 19 '13 at 14:13

Mark Schultheiss

32,614
12
69
100

tried both the final version and the alternate version... still not working – jcsbrotha Apr 19 '13 at 14:37
Please describe "still not working" in detail - perhaps you need one of the other propagation management? i.e. `event.stopImmediatePropagation()` documented http://api.jquery.com/event.stopImmediatePropagation/ – Mark Schultheiss Apr 19 '13 at 14:40
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 Apr 19 '13 at 14:45
and I did try the `stopImmediatePropagation` and it produced the same result, i.e. closes the dropdown when clicking inside of the dropdown. – jcsbrotha Apr 19 '13 at 14:47
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. – Mark Schultheiss Apr 19 '13 at 14:50
@jcsbrotha After pretty much being an idiot, I added something useful to my answer. – Mark Schultheiss Apr 19 '13 at 15:13
I did try the update (one which I myself should have caught) and still no luck. However Please see my EDIT post to my original question here soon – jcsbrotha Apr 19 '13 at 15:52

score 0 · Answer 3 · answered Apr 19 '13 at 14:13

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()

score 0 · Answer 4 · answered Apr 19 '13 at 16:08

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!

score 0 · Answer 5 · edited May 23 '17 at 12:28

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 '17 at 12:28

Community

1
1

answered Aug 19 '13 at 04:08

srt8driver

481
4
16

jQuery function for multiple elements with same class

5 Answers5