jQuery的追加补充小李UL

Question

我试图保持<li>的每一个选择列表使用jQuery选择国产

这里是我的HTML

<div class="content"> 
    <div class="contentreplace"></div> 
    <div class="buildoptions"><?=$buildoptions?></div> 
</div> 

$buildoptions基本模板是：

<p id="feedback"> 
    <span>You've selected:</span> 
<div id="select-result"><ul class='ul-depend'>Nothing Selected</ul></div> 
</p> 

这里是我的javascript：

$(function() { 
    $(".selectable").selectable({ 
    stop: function() { 
    var html2 = "<div class='steps'> Select the dependant Field </div>"; 
    $('#select-result').empty().append(html2); 

    var html = ""; 
    $(".ui-selected", this).each(function() { 
     var ecid = $(this).data('ecid'); 
     var field = $(this).data('field'); 
     html = "<li class='depend' data-field='"+field+"' data-ecid='"+ ecid+"'>"+ecid+" - "+field+"</li>"; 
     $("#select-result ul.ul-depend").append(html) 
    }); 

    } 
}); 
}); 

这里是可选的html：

<span class="ecdataset"><?=$stuff[0]['dataset']?></span>  
    <span class="ecvisit"><?=$stuff[0]['visit']?></span> 
<ol class="selectable"> 
<?php 
foreach ($stuff as $variable) 
{?> 
<li class="ui-widget-content" data-field="<?=$variable['field']?>" data-ecid="<?=$variable['ecspecs_id']?>"> 
    <textarea ><?=$variable['ecnum']?></textarea> 
    <span class="ecfield"><?=$variable['field']?></span> 
</li> 
<?php } 

>

所以，从理论上讲，当他们选择一个项目，不应该将其追加到#select-result ul无序列表，并添加？ <li>字符串？任何人都明白为什么它不会？

我测试了它，并且我从.ui-selected区域接收到正确的数据并将数字输入字符串。

感谢

Answer 1

$('#select-result').empty()删除它会删除#select-result元素中的所有元素。所以$("#select-result ul.ul-depend")不是一个有效的选择器。我修改了你的代码，现在它正在工作。

添加steps元素的标记，

<div id="select-result"> 
    <div class='steps'></div> 
    <ul class='ul-depend'>Nothing Selected</ul> 
</div> 

并清除它，而不是，

$('#select-result .steps').empty().append(html2); 

，并明确ul为好，

$("#select-result ul.ul-depend").empty(); 

这里是工作的样品， http://jsfiddle.net/FBY8y/

Answer 2

你没有任何附加的UL，因为你是用线

$('#select-result').empty().append(html2);