JS 在已有的 <ul> 中追加 <li> 后，我无法用点击事件选中它

Question

我有一个下拉列表 (Bootstrap)，在 select 编辑了这个下拉列表中的一个元素之后，我用 ajax 调用了一个 php 文件来加载一个新下拉列表的特定内容。

在我的 JS 脚本中，我附加了我在现有 ul 列表中找到的结果。

我的问题是在我的 ul 列表 #submitPoint 中添加新的 li 元素后，我无法使用 select 或从 js select 它们。不知道为什么，JS好像看不到他之前追加的新元素..

这里的 PhP 代码有 2 个下拉列表，一个用于流名称，另一个用于流的提交点：

print "<div class='row'>" ;
print "<div id='flowsPane' class='col-sm-6' style='display: true;'>" ;
print "<div class='btn-group'>" ;
print "<a id='dropdownText1' class='btn btn-default dropdown-toggle btn-select' data-toggle='dropdown' href='#'>Select a Flow <span class='caret'></span></a>" ;
print("<ul id='flows' class='dropdown-menu'>");
foreach ($flows as $flow) {
    print("<li id='" . $flow . "'>" . $client->getNameOfFlow($flow) . "</li>");
}
print "</ul>" ;
print "</div>" ;
print "</div>" ;
print "<div id='submitPointPane' class='col-sm-6' style='display: none;'>" ;
print "<div class='btn-group'>" ;
print "<a id='dropdownText2' class='btn btn-default dropdown-toggle btn-select' data-toggle='dropdown' href='#'>Select a SubmitPoint <span class='caret'></span></a>" ;
print("<ul id='submitPoint' class='dropdown-menu'>");

这里是JS代码：

<script type="text/javascript">
    $(document).ready(function() {
        $("#flows li ").click(function(e){
            var flow = $(this).text();
            //window.alert(flow);
            document.getElementById('dropdownText1').innerHTML = flow + ' <span class="caret"></span>';
        });

        $('#flows li').click(function(e) {
            $("#submitPointPane").show();
            //window.alert(e.target.id);
            var post_url = "include/submitpoint_list.php";
            $.ajax({
                type: 'POST',
                url: post_url,
                data: {'flowId': e.target.id},
                dataType: 'json ',
                success: function(data) {
                    $("#submitPoint").empty();
                    var ite = 0;
                    while (ite < data.length) {
                        $("#submitPoint").append("<li>" + data[ite] + "</li>");
                        //document.getElementById('submitPoint').innerHTML = "<li>" + data[ite] + "</li>";
                        ite++;
                    }
                    return false;
                },
                error: function(xhr, status, error) {
                    window.alert("error " + xhr.responseText);
                }
            });
            //return false;
        });
        $("#submitPoint li").click(function(e){
            var sp = $(this).text();
            window.alert(sp);
            document.getElementById('dropdownText2').innerHTML = sp + ' <span class="caret"></span>';
        });
    });
</script>

所以在 ul #submitPoint 中追加 li 元素后，如果我点击它，#submitPoint li click 函数永远不会被调用，但是 li 元素出现在我的列表.... （对不起，我不能添加图片）

您有什么想法可以帮助我解决为什么 JQuery selector 对于新的 li 元素追加不能正常工作的问题吗？谢谢大家！

Answer 1

您可以使用 jQuery 的 .on() 方法将事件侦听器绑定到现在和将来存在的元素。 http://api.jquery.com/on/

Answer 2

您遇到的问题是由一个简单的事实引起的，即您动态创建的 <li> 项目没有附加点击事件的均匀侦听器。

您需要的是使用 .on() 方法，为动态创建的元素附加一个事件监听器。

// The event listener is being applied to the parent.
$('#flows').on('click', 'li', callback);

JS 在已有的 <ul> 中追加 <li> 后，我无法用点击事件选中它

After JS append a <li> in existing <ul>, i cannot selected it with click event

javascript

jquery

append

selector

html-lists