Question

代码： http://jsfiddle.net/z1ot7c2g/12/

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

我有响应式平铺网格，点击可扩展面板，在一排模块下方打开。依赖于屏幕的行是1,2,3或更多模块内部.row包装器即时添加。
点击单击模块的内容从.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”内部不起作用

1 个答案: