Question

我试图在mixItUp中添加基于AJAX调用的新DOM（MIX）元素，但它没有用。

Answer 1

我搜索了很多，2小时后在https://github.com/patrickkunka/mixitup/issues/149

找到了解决方案

我想与其他人分享，所以他们不会花时间花在我身上。

解决方案是在追加新元素之前销毁整个mixItUp，然后再次加载mixItUp。

$('#mixItUpContainer').mixItUp('destroy');
var mixDiv = $('<div></div>')
    .attr({ "data-myorder" : numberOfMixDIVs })
    .addClass("mix");
$("#mixItUpContainer").append(mixDiv);
numberOfMixDIVs++;

Answer 2

也许您在官方的Mixitup支持论坛上找到了有用的答案。

<强>首先：设置你的ajax请求。这个恰好是一个非常简单的例子。

$.ajax({
    url: "/some/url.html",
    dataType: "html"
}).done( function ( html ) {
     // When ajax request is done do some stuff.
});

<强>第二：你将得到的回复将是一串html。然后，您必须解析该字符串，从中获取DOM节点并将其转换为Mixitup可以使用的jQuery集合。在Mixitup文档中有一个Append方法，它需要传递一个jQuery集合。

旁注：当我将字符串转换为DOM节点时，我遇到了一个问题，我也找到了文本节点。在下面的示例中，我将向您展示如何删除文本节点，因为它们不是必需的。

所以在.done回调中执行以下操作：

function convertHTML ( html ) {
    var newHtml = $.trim( html ),
            $html = $(newHtml ),
            $empty = $();

    $html.each(function ( index, value ) {
        if ( value.nodeType === 1) {
            $empty = $empty.add ( this );
        }
    });

    return $empty;
};

<强> 1。变量

newHtml，修剪字符串中的空格，这样我们就可以了正确解析它。
$ html，将整个内容包装在jQuery中，以便我们使用.each进行迭代每个节点。
$ empty，创建一个我们将用作的空白jQuery对象新系列。

<强> 2。每个函数： $ html.each ...，遍历所有节点

如果，如果节点类型是DOM节点（1）$ empty，则将$ empty设置为它的self并使用add方法添加新的DOM节点/ jQuery 对象集合。
请注意，必须按照描述的方式完成，否则无效。 $空加（）;没有进行$ empty =将无效。

<强>第三：使用Mixitup的追加方法NOT jQuery，将元素抛入页面。

$('#mix-up-list').mixItUp('append', $html);

所以现在一起：

function convertHTML ( html ) {
    var newHtml = $.trim( html ),
            $html = $(newHtml ),
            $empty = $();

    $html.each(function ( index, value ) {
        if ( value.nodeType === 1) {
            $empty = $empty.add ( this );
        }
    });

    return $empty;
};

并请求：

$.ajax({
    url: "/some/url.html",
    dataType: "html"
}).done( function ( html ) {
    $html = convertHTML( html );
    $('#mix-up-list').mixItUp('append', $html); 
});

原始链接： https://mixitup.kunkalabs.com/support/topic/ajax-example/

如何动态添加元素到MixItUp？

2 个答案: