我正在尝试构建一个页面,其中列表项是动态添加到" ul"元件。
我可以第一次执行步骤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> ")
}
})
});
答案 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> ")
}
});
});