Bootstrap dropdown menu on click

Question

I am trying to create a dynamic Bootstrap dropdown button when the page load using this function

function loadPage(){

  var fType = $('<div class="btn-group" style="padding: 5px; width: 100%;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:100%">Category<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#" id="act1">Action</a></li><li><a href="#" id="act2">Action 2</a></li></ul>');
  $("#col1").append(fType);

}

But when I try to add onclick event on one of the options it doesn't work! This is my javascript

    $('#act1').click(function(e) {
       e.preventDefault();
       alert('alerted');
});

Thanks.

Tomanow · Accepted Answer · 2014-02-22 21:54:34Z

1

Since content is new to DOM, you must init the click listener AFTER you load the button.

function loadPage() {
    var fType = $('<div class="btn-group" style="padding: 5px; width: 100%;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:100%">Category<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#" id="act1">Action</a></li><li><a href="#" id="act2">Action 2</a></li></ul>');
    $("#col1").append(fType).promise().done(function () {
        $('#act1').click(function (e) {
            e.preventDefault();
            alert('alerted');
        });
    });
}

answered Feb 22, 2014 at 21:54

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

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

1 Comment

Dmitriy Khaykin Over a year ago

Nice! Simple yet beautiful.

Collectives™ on Stack Overflow

Bootstrap dropdown menu on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related