如何向MixItUp动态添加元素?

我找了很多,两个小时后在 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++;

也许你也会发现我在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设置回 并使用add方法添加新的DOM节点/jQuery 对象添加到集合。
• 请注意,必须按照描述的方式进行,否则将无法工作$空,add();如果不继续$empty=将不起作用。

第三 : 使用Mixitops追加方法NOT jQuerys将元素放入页面。

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

所以现在大家一起:

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

$html.each(函数(索引,值){
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/