Question

我有点击功能的正文，有条件地添加或删除按钮。

添加有效，但remove()和detach()都无效。

我正在旋转图像，我只想在从原始图像旋转图像时显示“保存”按钮。

这就是文档准备就绪

$(document).ready(function() {  
    var $save = $('<div id="savebutton_container"><button name="savebutton" id="savebutton">Save</button></div>');

        $('body').on('click','img',function() {
            if(typeof rotate.counter == 'undefined') {
                rotate.counter = 0;
            }   
            rotate.counter += 90;
            if(rotate.counter === 360) {
                rotate.counter = 0;
            }
            console.log(rotate.counter);
            $(this).removeClass(function(index,css){ // clear classes first.
                return (css.match (/(^|\s)rotate\S+/g) || []).join(' '); // remove rotational classes
            });

            if(!(rotate.counter == 0) ) { // NOT 0 degrees
                console.log('rotate counter is not 0');
                $(this).addClass('rotate' + rotate.counter); // rotate the image
                if( $("#savebutton_container").length === 0 ) { // WORKS!
                    $(this).parents().append($save); // global $save
                }
            } else {
                console.log('rotate counter is 0');
                $("#savebutton_container").detach(); // works seemingly randomly
               // Also tried $save.detach();// also tried .remove();

            }

    });
});

每隔一段时间，保存按钮就会消失。控制台ALWAYS会在任何时候记录“旋转计数器为0”，但保存按钮不会消失！

Answer 1

我认为问题来自于您在行中使用parents()而不是parent()

$(this).parents().append($save);

parents()方法返回选择中的所有祖先元素，遍历，而parent()仅返回第一个父元素。

您正在检索图片的所有parents()（例如<body>，<html>等），并将$save附加到所有图片上。在多元素选择上使用append(elem)将结果elem克隆并附加到选择中的每个目标。这不是您想要的，这导致您丢失$save引用（特别是因为您要添加具有相同id的元素的多个副本）。

这个Plunkr有一个稍微简化的工作版本（点击要测试的图像）。请注意detach()是正确的，remove()不是。 detach()保留有关该元素的所有jQuery元数据，特别是在您计划稍后重新附加元素时使用它。当你想要丢弃元素时使用remove()。

Answer 2

我建议您尝试使用$(document).on('click'...)代替$(body).on()

由于您创建的元素是动态创建的，因此您需要从dom树的根开始重新检查dom。

每当我使用动态元素时，我总是确保我的事件触发器正在运行$(document)选择器。

jQuery detach（）和remove（）都不能处理附加元素

2 个答案: