刪除在colorbox中動態創建的元素

我有一個配置文件列表顯示在一個colorbox窗口中。列表中的每個項目都有一個「+」按鈕，將它們添加到最終列表中。我添加了一個檢查（if（$（'＃id'）。length == 0））來檢查元素是否已經在最終列表中，並防止它在列表中添加兩次。刪除在colorbox中動態創建的元素

當第一次加載colorbox時，一切正常。但是當colorbox關閉並重新打開時，if條件失敗，因爲該元素沒有在$ .colorbox.close事件上被銷燬。元素仍然存在於文檔中，但不會顯示在colorbox窗口中，因爲內容已從外部網址重新加載。即使當「最終列表」爲空時，這也會向我顯示「此成員已經在列表中」的提示框。在最終名單中添加

$(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（）方法。它完成了這項工作，但它刪除了完整的colorbox元素，這會阻止在重新加載頁面之前再次打開colorbox。

來源

2013-08-23 Gursharan Singh

我想，我發現這個問題的問題。我在colorbox的「onComplete」函數中添加了jQuery代碼。現在，第二次加載colorbox後，再次向文檔添加相同的jquery代碼，導致點擊事件觸發兩次。

現在我有兩個選擇，

的顏色框的功能的onComplete使用外碼。（我不能讓代碼以這種方式工作）。
刪除關閉彩盒時加載的jquery代碼。

請問，找到解決這個問題的解決方案。

來源

2013-08-23 07:49:09

該問題已通過使用第一個選項解決，可以將代碼添加到colorbox的onComplete選項之外，從而防止兩次加載jquery代碼。 –

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

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

來源

2013-08-23 06:08:10

對於困惑兄弟抱歉，但我錯過了一些在發佈之前被意外刪除的部分。現在它又被添加了。我的動機是在colorbox關閉時銷燬新的列表項ID。其他一切正常。 –

刪除在colorbox中動態創建的元素

回答

相關問題