jquery - 为什么此功能不会在 Jquery 可排序 UI 中的 li 元素中添加复选框？

Question

我正在使用 Jquery 可排序的列表，该列表是从外部网页加载的。li 内容在用户单击选项卡时加载。这可行，但我也尝试为可排序列表中的每个 li 元素添加一个复选框输入：

<script type="text/javascript"> // loads slides when user clicks tab
        window.onload = function() {
        var a = document.getElementById("fvsortid");

          a.onclick = function() {
          $("#sortable").load("file.xml");
          $('<input type="checkbox" class="liChk" />').prependTo('#sortable li');
          }

        }   
</script> 

为什么不添加复选框？

这是 HTML（在从外部页面加载 li 列表之前）：

<div id="tabs-2">

        <ul id="sortable">


        </ul>

<div id="adder">
<input class='btn' type='submit' value='Add Slide' />
</div>

    </div>

谢谢你的帮助。

Answer 1

由于您使用的是 jQuery，因此只需将 jQuery 的prepend()直接用于父级，如下所示：

$(document).on('click', '.btn', function() {
    $("#sortable").load("file.xml");
    $("#sortable").prepend('<input type="checkbox" class="liChk" />');
});

​</p>

在这里提琴：

http://jsfiddle.net/9Ryfg/

Answer 2

在我看来，在调用 prependTo 之前， .load(xmlFile) 行可能尚未完成执行或加载。因此，不存在 li 。

您可以在加载完成后使 prepend 函数成为回调。

a.onclick = function() {
          $("#sortable").load("file.xml", function(){
                $('<input type="checkbox" class="liChk" />').prependTo('#sortable li');
          });
}

或者，这里是一个如何在 500 毫秒延迟后调用前置的示例。

a.onclick = function() {
          $("#sortable").load("file.xml");
          setTimeout(function(){
                 $('<input type="checkbox" class="liChk" />').prependTo('#sortable li');
          }, 500);
}