Question

I’m using Jquery sortable for a list, which is loaded from an external webpage. The li content is loaded when the user click on a tab. This works, but I am also trying to add a checkbox input to each li element in the sortable list:

<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> 

Why isn’t the checkbox being added?

Here is the HTML (before li list is loaded from external page):

<div id="tabs-2">

        <ul id="sortable">


        </ul>

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

    </div>

Thanks for any help.

Answer 1

It looks to me like the .load(xmlFile) line might not be finished executing or loading, before the prependTo is called.. thus, no li exists.

You could make the prepend function a callback after the load is complete.

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

Or, here is an example of how to call the prepend after a 500 millisecond delay.

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