JS后添加<在现有的<ul>中，我无法使用click事件选择它

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

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

我的问题是在我的ul列表中添加新的li元素#submitPoint之后，我不能用选择器从js中选择它们。我不知道为什么，但JS似乎没有看到他刚才附加的新元素…

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

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

<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点击函数永远不会调用，但li元素出现在我的列表....(抱歉我不能添加图片)

你有任何想法，可以帮助我的问题，为什么JQuery选择器不能正常工作为新的li元素追加?谢谢大家!