爲什麼這個函數不會在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（之前是從外部加載頁面裏列表）：

<div id="tabs-2"> 

     <ul id="sortable"> 


     </ul> 

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

    </div> 

感謝您的幫助。

Answer 1

它看起來像.load（xmlFile）行可能沒有完成執行或加載，在t之前他prependTo被稱爲..因此，沒有李存在。

加載完成後，可以使預加載函數成爲回調函數。

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

或者，這裏是一個如何在500毫秒延遲後調用prepend的示例。

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

Answer 2

由於您使用jQuery的纔剛剛使用jQuery的前置（）直接到父這樣的：

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

小提琴這裏：

http://jsfiddle.net/9Ryfg/