在selectmenu上更改事件后点击不工作的Jquery

时间:2017-02-07 23:42:43

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

我正在尝试构建一个页面,其中列表项是动态添加到" ul"元件。

  1. 单击列表项时,将打开一个selectmenu(jquery插件)
  2. 用户将选择其中一个值,之后选择菜单需要关闭(隐藏)
  3. 从菜单中选择的值将填充到列表项的文本中,该列表项被单击以弹出选择菜单。
  4. 填充列表项文本后,动态添加其下的另一个列表项
  5. 用户现在应该能够重复步骤1到4。
  6. 我可以第一次执行步骤1到4但是在隐藏了selectmenu之后,无法识别新添加的列表项或任何以前添加的列表项。

    我无法弄明白,我哪里出错了。下面是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> ")
            }
        })
    });
    

1 个答案:

答案 0 :(得分:0)

我能够自己找到答案。 &#34;上&#34;没有正确定义

$('.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> ")
        }
    });

});