Question

我有一块看起来像这样的动态代码。

        var li3 = document.createElement('li');
        li3.classList.add("col-sm-3");
        li3.classList.add("no_padding");
        var inner = "";
        inner = inner + "<div class='dropdown'>";
        inner = inner + "<button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0 4px 4px 0;' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true' data-questnrid='"+questnrid+"' data-questionid='"+questionid+"' data-dlnkid='"+dlnkid+"' data-lnkid='"+lnkid+"' data-qstaskedid='"+qstaskedid+"' data-qstaskedgrpid='"+qstaskedgrpid+"'>";
        inner = inner + "<span class='dropdown_text'>Choose a option</span>";
        inner = inner + "<span class='caret'></span>";
        inner = inner + "</button>";
        inner = inner + "<ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>";
        inner = inner + "<li><a href='#' class='list-item'>Yes</a></li>";
        inner = inner + "<li><a href='#' class='list-item'>No</a></li>";
        inner = inner + "<li><a href='#' class='list-item'></a></li>";
        inner = inner + "</ul>";
        inner = inner + "</div>";
        li3.innerHTML = inner;
        document.getElementById(thisID).appendChild(li3);

在网络上它看起来更像是这样。

<li class='col-sm-2 no_padding'>
    <div class='dropdown'>
        <button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0px 4px 4px 0px; type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>
            <span class='dropdown_text'>Choose a option</span>
            <span class='caret'></span>
        </button
        <ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>
            <li><a href='#' class='list-item'>Yes</a></li>
            <li><a href='#' class='list-item'>No</a></li>
           <li><a href='#' class='list-item'></a></li>
       </ul>
    </div>
</li>

按下n按钮调出第一个块，它会完美地生成列表但现在我点击下拉列表接受该下拉列表的值，并且没有事件触发。这就是我用过的。

    $('.dropdown-menu li > a').on("click", function(event){
        console.log("fire");
        $(this).closest('.dropdown').find('button span.dropdown_text').text(this.innerHTML);
    });

此事件将触发第一个未动态创建的代码块。但是在此之后添加的任何oter块都不会触发事件触发器。

有什么想法吗？

哦，这是我使用的库，如果这可能会导致某些内容

<script type="text/javascript" src="media/js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="media/css/bootstrap.css">
<script type="text/javascript" src="media/js/bootstrap.js"></script>

Answer 1

$("body").on("click", '.dropdown-menu li > a',  function(event) {
})

因为脚本运行时元素不存在，所以事件侦听器不会添加到按钮中。

Answer 2

尝试选择整个文档，然后在“单击”参数后选择元素。

$(document).on("click", ".dropdown-menu li > a", function(event){
    console.log("fire");
});

动态创建的元素不会触发触发器

2 个答案: