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＆＃39; s prepend（）直接用于父代，如下所示：

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

小提琴：

http://jsfiddle.net/9Ryfg/

Answer 2

在我看来，在调用prependTo之前，.load（xmlFile）行可能没有完成执行或加载。因此，没有li。

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

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);
}

为什么这个函数不会在Jquery可排序UI中为li元素添加复选框？

2 个答案: