javascript - 如何在使用 Tag-it 通过 Ajax 加载预先添加的元素时不触发 afterTagAdded

Question

所以这是我的情况 - 单击一个按钮我加载

<ul id="members">
      <li>member1</li>
      <li>member2</li>
</ul>

（ul 进入 .modal-body 内部）通过 ajax，填充预先添加的列表元素，然后我加载这个 Jquery 插件 Tag-it！在 ul 上：

$.post('/profil/ajax-load-group/', params, function(data) {         
    $('#sidebar_modal .modal-body').html(data);
    $('#members').tagit({               
    allowDuplicates: false,
    afterTagAdded: function(event, ui) {
        members = added_members + ui.tagLabel + ';';
    }               

})

所以问题是它捕获了插件加载后添加的预添加元素，并且我正在努力寻找解决方法，因为我真的需要找到之后添加的成员，而不是那些已经在数据库中了。

提前致谢。

Answer 1

我通过对已经存在的 li 元素进行唯一分类来解决这个问题。

<ul id="members">
 <li class='exists'>member1</li>
 <li class='exists'>member2</li>
</ul>

然后在 afterTagAdded 函数回调中检查

$.post('/profil/ajax-load-group/', params, function(data) {         
    $('#sidebar_modal .modal-body').html(data);
    $('#members').tagit({               
    allowDuplicates: false,
    afterTagAdded: function(event, ui) {
        if($(ui.tag).hasClass('exists'))
             return false;
        members = added_members + ui.tagLabel + ';';
    }               
})

现在，当您添加新的 li 元素时，需要注意的是它们是在没有 class='exists' 属性的情况下添加的，tagit 它应该可以按预期工作。

希望这可以帮助！