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

单击Bootstrap下拉菜单

1 个答案: