如何向MixItUp动态添加元素？

Question

我试图基于AJAX调用在mixItUp中添加新的DOM (MIX)元素，但是它没有工作。

Answer 1

我找了很多次，两个小时后在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文档中有一个附加方法，它需要传递一个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，添加()；如果不使用$empty =，则无法工作。

第三：使用Mixitup的附加方法(而不是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/