0

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

  1. 单击列表项时，它将打开一个选择菜单（jquery 插件）
  2. 用户将选择其中一个值，之后选择菜单需要关闭（隐藏）
  3. 从菜单中选择的值被填充到被单击以弹出选择菜单的列表项的文本中。
  4. 填充列表项文本后，在其下方动态添加另一个列表项
  5. 用户现在应该能够从步骤 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> ")
        }
    })
});
4

1 回答 1

0

我能够自己找到答案。“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> ")
        }
    });

});
于 2017-02-08T14:59:31.963 回答