CODEWITHSUNDEEP
jquerytwitter-bootstrap
jcsbrotha
jcsbrotha

Reputation: 99

jQuery function for multiple elements with same class

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>

Upvotes: 0

Views: 2448

Answers (5)

srt8driver
srt8driver

Reputation: 491

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.

Upvotes: 0

jcsbrotha
jcsbrotha

Reputation: 99

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!

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

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'

Upvotes: 1

rigobcastro
rigobcastro

Reputation: 1257

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

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

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

Upvotes: 1

Related Questions