I'm trying to implement a click event on a bootstrap dropdown menu

Question

Hi I have a bootstrap dropdown menu that is auto filled from a database. I am trying to get an event to happen when I click on one of the items in the menu. I have tried

$("body").on("click", ".ddBtnClick", function(event) { 
    console.log("Is it working? Yes!!");
});

with ".ddBtnClick" being a class assigned to each of the items in the list. but nothing happened. Here is the code to populate the list from a database.

$.getJSON("http://jeremiah.abrahamott.com/DadsCarsObjects.txt", function(data){
    $.each(data.aaData, function(i, option){
    $("#dropdownfill").append($('<li/>').append($('<a/>').attr("id", option.Year).attr("href", "#").attr("tabindex", "-1").addClass("ddBntClick").text(option.Make)))
    });
});

Here is the html for the dropdown.

<div class="row" style="margin-left:50px;">
            <div class="span3">
                <div class="btn-group">
                    <a class="btn dropdown-toggle" data-  toggle="dropdown" href="#">Make
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="dropdownfill">

                    </ul>
                </div>
            </div>
    </div>

PSL · Accepted Answer · 2013-05-20 20:31:08Z

1

Issue is with your className. You are registering the delegated event handler for ddBtnClick but actual class name is ddBntClick.

$("body").on("click", ".ddBtnClick", function(event) { 
    console.log("Is it working? Yes!!");
});

and

.addClass("ddBntClick");

Change the class name during construction or change in your event delegation.

$(function()
{
    $("body").on("click", ".ddBntClick", function(event) {  
        console.log("Is it working? Yes!!");
    });
});

answered May 20, 2013 at 20:31

PSL

124k21 gold badges257 silver badges243 bronze badges

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

1 Comment

PSL Over a year ago

Great glad it helped out resolving your issue.

qJake · Accepted Answer · 2013-05-20 20:33:40Z

0

Have you tried wrapping your Javascript in the document.ready event?

$(function()
{
    $("body").on("click", ".ddBtnClick", function(event) {  
        console.log("Is it working? Yes!!");
    });
});

See the jQuery .ready() documentation for more information and examples.

Also, you should register the click event on the actual button and use .click() instead of .on():

$(function()
{
    $(".ddBtnClick").click(function(event) {  
        console.log("Is it working? Yes!!");
    });
});

Also, you have a typo:

.addClass("ddBntClick")

Should be:

.addClass("ddBtnClick")

edited May 20, 2013 at 20:33

answered May 20, 2013 at 20:23

qJake

17.2k17 gold badges88 silver badges138 bronze badges

Collectives™ on Stack Overflow

I'm trying to implement a click event on a bootstrap dropdown menu

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related