jquery追加將li添加到ul

Question

我正在嘗試為使用jquery selectable進行的每個選擇維護一個<li>列表

這是我的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

你沒有向ul附加任何內容，因為你要刪除它

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

Answer 2

$('#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/