单击引导程序下拉菜单

Question

我正在尝试使用此功能加载页面时创建动态的Bootstrap下拉按钮

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

}

但是，当我尝试在选项之一上添加onclick事件时，它不起作用！ 这是我的JavaScript

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

谢谢。

Answer 1

由于内容是DOM的新内容，因此必须在加载按钮后初始化单击侦听器。

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