复选框事件未从可排序的 li 元素触发？答案

【问题标题】：Checkbox event not triggering from sortable li element?复选框事件未从可排序的 li 元素触发？
【发布时间】：2012-10-06 01:02:50
【问题描述】：

我正在使用可排序的 jquery UI，但是当用户单击选项卡时，我通过从外部文件加载元素列表来填充可排序列表。加载列表项后，我为每个项添加一个复选框。复选框已显示，但单击它不会触发警报。但是，放置在li 元素之外的复选框可以正常工作 - 这让我相信 nedds 解决了与 jquery 可排序的某种不兼容：

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

【问题讨论】：

标签： jquery checkbox click jquery-ui-sortable

【解决方案1】：

尝试委派活动

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

事件似乎没有触发，因为当事件处理程序与其关联时，DOM 中不存在该元素。如果您有问题，请将事件委托给静态父级。

【讨论】：

【解决方案2】：

您需要在复选框被渲染后，使用 .on() 函数将事件处理程序指向复选框。

举个例子

$('input').on("click", function(event){
alert($(this).text());
});

这里有一些关于这个主题的阅读：http://api.jquery.com/on/

【讨论】：