jquery - 内容更改时jQuery函数不起作用

Question

我正在使用这个函数来在元素中添加一个 div，

(function() {
        $('.p-item').append('<div class="p-info-wrap"></div>)';
}) ();

我还在同一页面中有一个使用“quicksand”插件的可过滤画廊。在画廊内，我有上面提到的类（p-item）的元素。当我对画廊进行排序时，内容正在发生变化，并且附加的 div 上方突然消失了。

帮助我保持 div 活着，即使画廊已排序。

问候。

Answer 1

在排序过程结束时调用此函数

function addDiv() {
  $('.p-item').append('<div class="p-info-wrap"></div>)';
}

Answer 2

我不知道流沙是否提供了诸如排序后事件之类的任何钩子，但这是一种可以解决此问题的通用方法：

var doMod = true;
$('#tree')[0].addEventListener('DOMSubtreeModified', function() {
    if (!doMod) { return; }
    doMod = false; // Supress handling of subtree event
    $('#tree').append('foo');    
    doMod = true; // Restore the doMod flag
});

$('#tree').html('<p>New content</p>');

示例：http: //jsfiddle.net/8dUSJ/

不过，“DOMSubtreeModified”事件已被弃用，它应该被Mutation 观察者所取代。我对后者了解不多，所以请参阅文档。它似乎有可疑的浏览器支持。

编辑：

只是为了让我们清楚这一点：上述解决方案不会让 DIV 保持“活动”。它只允许您在排序后阅读它。

Answer 3

您的代码末尾有问题append()，您有一个'外部而不是内部append()。

(function() {
    $('.p-item').append('<div class="p-info-wrap"></div>)';
})();        //------------------------------------------^-----here is the issue.

试试这个：http: //jsfiddle.net/T8VC4/

(function() {
    $('.p-item').append('<div class="p-info-wrap"></div>');
})();