1

我在颜色框窗口中显示了配置文件列表。列表中的每个项目都有一个“+”按钮，可以将它们添加到最终列表中。我添加了一个检查 (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() 方法。它完成了这项工作，但它删除了完整的颜色框元素，这会阻止再次打开颜色框，直到您重新加载页面。

4

2 回答 2

1

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

现在我有两个选择，

  1. 使用颜色框的 onComplete 函数之外的代码。（我无法让代码以这种方式工作）。
  2. 删除关闭颜色框时加载的 jquery 代码。

请给我一个解决这个问题的解决方案。

于 2013-08-23T07:49:09.080 回答
0 
$(document).on('click', "a.remove", function() {
 remove_id = $(this).data('id');
 $('#'+remove_id).remove();
});

使用这个.. $(this).data('id') 已经包含 'final_'。不需要再次附加它

于 2013-08-23T06:08:10.067 回答