Question

我正在使用appendTo在单击按钮后在两个列表之间移动列表项。该按钮位于每个li元素中。每个li都有两个按钮，其中一次只能显示一个按钮，具体取决于li当前所在的列表。

这是功能：

// 'this' is the first list
// Click Handler for remove and add buttons
$(this.selector + ', ' + settings.target + ' li button').click(function(e) {

    var button = $(e.target);
    var listItem = button.parent('li');

    listItem.children("button").toggleClass("hidden");

    if (button.hasClass("assign")) {
        // Add Element to assignment list
        listItem.appendTo(settings.target);
    }
    else
        if (button.hasClass("remove")) {
            // Remove Element from assignment list
            listItem.appendTo(source);
        }
})

只要列表项位于原始li中，就会触发按钮中的单击事件。但是，一旦使用listItem.apendTo将其移动到其他列表。点击项目不再触发。为什么会这样？我在文档中找不到任何相关内容。

Answer 1

有时，如果脚本首次加载时，jQuery无法在DOM中出现，那么jQuery就无法找到。如果它是动态创建的元素，请尝试使用'on'

替换您的点击事件处理程序

而不是：

$(".aClass").click(function(){
    // Code here
})

尝试：

$("body").on("click", ".aClass", function(){
    Code here
})

http://api.jquery.com/on/

Answer 2

根据用户＆＃39; apsdehal＆＃39;的推荐，删除是我所需要的：

// Click Handler for remove and add buttons
    $(source.selector + ', ' + settings.target ).delegate("li button", "click", function(e) {

        var button = $(e.target);
        var listItem = button.parent('li');

        listItem.children("button").toggleClass("hidden");

        if (button.hasClass("assign")) {
            // Add Element to assignment list
            listItem.appendTo(settings.target);
        }
        else
        if (button.hasClass("remove")) {
            // Remove Element from assignment list
            listItem.appendTo(source);

        }

    });

Answer 3

您应该使用on事件。

$(".aClass").on("click",  function(){
    //Your custom code
})

on事件对于动态生成的数据+ HTML中的静态数据非常有用。

appenTo后jQuery点击事件丢失

3 个答案: