如何动态添加元素到 MixItUp？答案

【问题标题】：How to dynamically add elements to MixItUp?如何动态添加元素到 MixItUp？
【发布时间】：2014-10-15 18:42:40
【问题描述】：

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

【问题讨论】：

标签： javascript jquery ajax jquery-plugins append

【解决方案1】：

也许你也觉得我在 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。 Each 函数：$html.each…，遍历所有节点

如果节点类型是 DOM 节点 (1) $empty，则将 $empty 设置回它自己并使用 add 方法添加新的 DOM 节点/jQuery 对象集合。
请注意，必须按照描述的方式进行操作，否则将无法正常工作。 $空，添加（）；没有进行 $empty = 将不起作用。

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

【讨论】：

我更改了答案，添加了更多详细信息，而不仅仅是链接

【解决方案2】：

我搜索了很多，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++;

【讨论】：