jQuery "replaceWith" 在 "on" 中不起作用

Question

var DomTreeCopyWithRows = $(".crops #tiles").clone(true, true);

    $(document).on("click", ".mod", function(){
        //if there is any other opened, restore original DOM order
        $('.crops #tiles').replaceWith(DomTreeCopyWithRows);

        $this = $(this);
        //detect which tile's clicked
        var clickedModClass = "." + $this.children(".content").attr("class").split(' ')[1];

        //move content to after the nearest row wrapper
        $(clickedModClass).closest(".row").after($(clickedModClass));
        //open
        $(clickedModClass).addClass("opened").show();
        $(clickedModClass).animate({
            height : $(clickedModClass)[0].scrollHeight
        },"slow");

         return false;
     });

我有响应式平铺网格，点击可展开面板，在一排模块下方打开。取决于屏幕的行是动态添加的 .row 包装器内的 1、2、3 或可能更多模块。
单击时，单击模块的内容从 .mod 中取出并直接附加到 .row 之后.
一次只能打开一个。问题：当您第二次单击时，为了关闭已经打开的其他模块的内容并将其放回另一个 .mod 中，我使用 $('.crops #tiles').replaceWith(DomTreeCopyWithRows) 放入先前保存的 DOM 结构。

问题：

$('.crops #tiles').replaceWith(DomTreeCopyWithRows) doesn't work.

我仍然有多个打开的容器。

DOM 替换对 $(".crops #tiles").click 有效，但在 DOM 替换发生后我无法保留我的点击事件附件.

如有任何想法，我们将不胜感激。

Answer 1

它不起作用的原因是，一旦您完成 replaceWith 一次，您的 DomTreeCopyWithRows 引用的节点就是DOM，所以他们是被修改的。由于每次点击时您都这样做，所以第一次将您的副本放入 DOM，并且它会保留在那里，并由后续代码修改。

最小更改修复是在添加时再次克隆：

$('.crops #tiles').replaceWith(DomTreeCopyWithRows.clone(true, true));
// -----------------------------------------------^^^^^^^^^^^^^^^^^^

Updated Fiddle

jQuery "replaceWith" 在 "on" 中不起作用

jQuery "replaceWith" doesn't work inside "on"

jquery

click

replacewith