Question

我有一个配置文件列表显示在颜色框窗口中。列表中的每个项目都有一个“+”按钮，可将它们添加到最终列表中。我添加了一个检查（if（$（'＃id'）。length == 0））来检查该元素是否已经在最终列表中并阻止它在列表中添加两次。

第一次加载彩盒时，一切正常。但是当colorbox关闭并重新打开时，if条件失败，因为$ .colorbox.close事件中的元素没有被销毁。该元素仍然存在于文档中，但不会显示在颜色框窗口中，因为内容已从外部URL重新加载。这显示警告框“此成员已在列表中”，即使“最终列表”为空。

$(document).on('click', "a.add_to_list", function() {
    var new_id = 'final_'+$(this).data('id');
    var html = '<li id="'+new_id+'"><a data-id="'+new_id+'" class="remove label label-important right "><i class="icon-minus icon-white"></i></a>' + $('#'+id).html() + '</li>';
    if($('#'+new_id).length == 0) {
        $('#final_list').append(html);  
    }
    else
    {
        alert('This Member is already in the list');
    }       
});

 $(document).on('click', "a.remove", function() {
    remove_id = $(this).data('id');
    $('#'+remove_id).remove();
});

HTML

<ul id="list1"><li id="user1"><a class="right add_to_list label label-important" data-id="'user1'"><i class="icon-plus icon-white"></i></a><a href="http://localhost/test/profile/user1" class="align-left">
  <img width="60px" height="60px" src="http://localhost/test/files/profile_img/user1.jpg" class="avatar photo"></a><p>User 1</a><br>@user1<br>Description</p></li></ul>

最终列表中添加的元素

<ul id="final-list"><li id="final-user1"><a class="right remove label label-important" data-id="final_user1"><i class="icon-plus icon-white"></i></a><a href="http://localhost/test/profile/user1" class="align-left">
      <img width="60px" height="60px" src="http://localhost/test/files/profile_img/user1.jpg" class="avatar photo"></a><p>User 1</a><br>@user1<br>Description</p></li></ul>

现在我要销毁colorbox.close事件上的元素，以便在第二次打开颜色框时它们不应出现在文档中。我尝试将colorbox.close事件的执行从close（）方法更改为remove（）方法。它完成了这项工作，但它删除了完整的颜色框元素，这会阻止再次打开颜色框，直到您重新加载页面。

Answer 1

我想，我发现了这个问题的问题。我在colorbox的“onComplete”函数中添加了jQuery代码。现在，在第二次加载颜色框后，再次向文档添加相同的jquery代码，这会导致click事件触发两次。

现在我有两个选择，

使用colorbox的onComplete函数之外的代码。（我无法通过这种方式获得代码）。
删除关闭颜色框时加载的jquery代码。

请找到解决这个问题的解决方案。

Answer 2

$(document).on('click', "a.remove", function() {
 remove_id = $(this).data('id');
 $('#'+remove_id).remove();
});

使用此.. $（此）.data（'id'）已包含'final_'。不需要再次追加

删除在colorbox中动态创建的元素

2 个答案: