Question

I am using jquery UI sortable, but I am populating the sortable list by loading a list of elements from an external file when the user click on a tab. Upon loading the list items, I add a checkbox to each one. The checkbox is showing up, but clicking it won’t trigger the alert. However, a checkbox placed outside the li element works fine – this leads me to believe that there is some kind of incompatibility with jquery sortable that nedds resolved:

Javascript:

window.onload = function () {

    $('input:checkbox').change(function () { // detects when user clicks on a checkbox
        alert("You click a checkbox");
    });

    var a = document.getElementById("fvsortid"); // loads slides when user clicks tab

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

Answer 1

Try delegating the event

$('#sortable').on('change' , 'input:checkbox' ,function() { 
          alert("You click a checkbox");
 });

The event does not seem to fire because the element was not present in the DOM when the event handler was associated to it.. Delegating the event to a a static parent should your problem..