색상 상자에서 동적으로 생성 된 요소 제거

Question

색상 상자 창에 프로필 목록이 표시됩니다. 목록의 각 항목에는 최종 목록에 추가 할 "+"단추가 있습니다. 요소 (if ($ ('id id'). 길이 == 0)를 추가하여 요소가 이미 최종 목록에 있는지 확인하고 목록에 두 번 추가하지 못하도록합니다.

처음에는 컬러 박스를로드 할 때 모든 것이 잘 작동합니다. 그러나 colorbox가 닫히고 다시 열릴 때 $ .colorbox.close 이벤트에서 요소가 파괴되지 않았기 때문에 if 조건이 실패합니다. 요소는 문서에 여전히 있지만 외부 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가 두 번째로 열립니다. colorbox.close 이벤트의 실행을 close() 메서드에서 remove() 메서드로 변경해 보았습니다. 작업을 수행했으나 전체 colorbox 요소가 제거되어 페이지를 다시로드 할 때까지 colorbox를 다시 열 수 없습니다.

Answer 1

나는이 문제점에 대한 문제점을 발견했다. colorbox의 "onComplete"함수 안에 jQuery 코드를 추가했습니다. 이제 두 번째로 colorbox를로드 한 후에 동일한 jquery 코드가 문서에 다시 추가되어 click 이벤트가 두 번 발생합니다.

는 지금은 두 가지 옵션의 colorbox의의 onComplete 함수 외부

1. 사용 코드가 있습니다. (나는이 방법으로 코드를 작동시킬 수 없다).
2. colorbox를 닫을 때로드 된 jquery 코드를 제거하십시오.

친절하게도이 문제를 해결할 수있는 해결책을 찾으십시오.

Answer 2

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

사용하십시오. $ (this) .data ('id')에 이미 'final_'이 (가) 있습니다. 다시 추가하지 않아도됩니다.