Javascript 如何向MixItUp动态添加元素？

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

我搜索了很多，2小时后在

我想和其他人分享，这样他们就不会花我花的时间了

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

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

$（'mixItUpContainer'）.mixItUp（'destroy'）；
var mixDiv=$（''）
.attr（{“数据myorder”：numberOfMixDIVs}）
.addClass（“混合”）；
$（“#mixItUpContainer”）.append（mixDiv）；
numberOfMixDIVs++；

也许你也会发现我在官方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); 
});

原始链接：

---

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