选择菜单上的更改事件后，单击时的 Jquery 不起作用答案

【问题标题】：Jquery on click not working after change event on selectmenu选择菜单上的更改事件后，单击时的 Jquery 不起作用
【发布时间】：2017-02-07 23:42:42
【问题描述】：

我正在尝试构建一个页面，其中列表项在“ul”元素下动态添加。

单击列表项时，将打开一个选择菜单（jquery 插件）
用户将选择其中一个值，之后选择菜单需要关闭（隐藏）
从菜单中选择的值被填充到单击以弹出选择菜单的列表项的文本中。
填充列表项文本后，在其下方动态添加另一个列表项
用户现在应该能够重复步骤 1 到 4。

我可以第一次执行步骤 1 到 4，但是在隐藏选择菜单后，无法识别单击新添加的列表项或任何以前添加的列表项。

我无法弄清楚我哪里出了问题。下面是html和jquery代码。任何指针将不胜感激

HTML

<body>
<div class="container">
    <ul class="tree">
        <li class="connection" id="connection1">-------------</li>
    </ul>
</div>


</body>
<div class="selection">
    <select id="my-select" name="character" multiple="multiple">
        <optgroup label="The Griffins">
            <option value="Peter">Peter Griffin</option>
            <option value="Lois">Lois Griffin</option>
            <option value="Chris">Chris Griffin</option>
            <option value="Meg">Meg Griffin</option>
            <option value="Stewie">Stewie Griffin</option>
        </optgroup>

        <optgroup label="Peter's Friends">
            <option value="Cleveland">Cleveland Brown</option>
            <option value="Joe">Joe Swanson</option>
            <option value="Quagmire">Glenn Quagmire</option>
        </optgroup>

        <option value="Evil Monkey">Evil Monkey</option>
    </select>
</div>

点击功能的Javascript

var i = 1;

$('body').on("click", ".connection", function () {
    var connectionid = $(this).attr('id');
    $("#my-select").selectmenu({
        change: function (event, data) {
            var selectedText = $(this).val();
            $("#connection" + i).text(selectedText);
            $(".selection").hide();
            i++;
            var id = "connection" + i;
            $("#" + connectionid).append("<li class='connection' id=" + id + ">-------------</li> ")
        }
    })
});

【问题讨论】：

标签： jquery jquery-ui show-hide jquery-ui-selectmenu

【解决方案1】：

我自己找到了答案。 “on”没有正确定义

$('.container').on('click', 'li',function (e) {
    //alert("hello");
    var connectionid = $(this).attr('id');
    $(".selection").show();
    $("#my-select").selectmenu({
        change: function(event,data){
            //alert("hello2");
            var selectedText = $(this).val();
            $("#connection" + i).text(selectedText);
            $(".selection").hide();
            i++;
            var id = "connection" + i;
            $("#" + connectionid).append("<li class='connection' id=" + id + ">-------------</li> ")
        }
    });

});

【讨论】：