Ajax 및 부트 스트랩 모달

Question

ajax 호출을 사용하여 부트 스트랩 모달을 사용하는 사용자를 삭제하려고합니다. 모달은 확인을 위해 사용되며 다음과 같습니다. 나는 사용자 입력을 사용자가이

<a id="delete" href="/admin/edit/user/delete/30" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a> 

처럼 작동한다 클릭한다는 것을

$('a#delete').click(function(e){ 
     var anchor = this; 
     $('#deleteModal').modal('show'); 
     $('button#confirm').click(function(e){ 
      $('#deleteModal').modal('hide'); 
      $.ajax({ 
       url: $(anchor).attr('href'), 
       success:function(result){ 
        $(anchor).closest('tr').addClass("error"); 
        $(anchor).closest('tr').delay(2000).fadeOut(); 
       }}); 
     }); 
     return false; 
    }); 

링크를 처리하기 위해 다음과 같은 자바 스크립트를 사용하고 있지만 내가 뭔가 것으로 나타났습니다 그리고

<!-- Modal --> 
<div id="deleteModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
<h3 id="myModalLabel">Delete user</h3> 
</div> 
<div class="modal-body"> 
<p>You are about to delete this user. Are you sure that you want to continue?</p> 
</div> 
<div class="modal-footer"> 
<button id="confirm" class="btn btn-primary">Yes</button> 
<button id="cancel" class="btn" data-dismiss="modal" aria-hidden="true">No, leave</button> 
</div> 
</div> 

이상한 일이 일어난다. 한 명의 사용자를 삭제하기 위해 클릭하고 모달로부터 조치를 취소하도록 선택한 다음 조치를 확인하는 다른 사용자를 삭제하도록 선택하면 두 사용자가 모두 삭제됩니다.

나는 선언 한 규칙이 세션 중에 클릭 된 개체에 여전히 적용된다고 생각합니다. 이것을 피할 수있는 방법이 있습니까?

Answer 1

button#confirm에 click 이벤트를 등록하는 방식 때문입니다. 삭제 버튼을 클릭 할 때마다 모달 대화 상자의 확인 버튼에 새로운 클릭 이벤트 핸들러가 등록됩니다.

문제는 접근 방식이 demonstrated here입니다.

두 부분

다음

$('button#confirm').click(function(e){ 
    $('#deleteModal').modal('hide'); 
    $.ajax({ 
     url: $('#deleteModal').attr('href'), 
     success:function(result){ 
      $(anchor).closest('tr').addClass("error"); 
      $(anchor).closest('tr').delay(2000).fadeOut(); 
     }}); 
}); 

$('a#delete').click(function(e){ 
    var anchor = this; 
    $('#deleteModal').modal('show').attr('href', $(anchor).attr('href')); 
    return false; 
}); 

우리는 페이지 로딩에 한 번만 confirm 클릭 이벤트를 등록하지만, 삭제 버튼을 클릭했을 때 우리가에 대한 컨텍스트 정보를 전달로 논리를 분할하여 해결할 수 있습니다 user 속성을 통해 확인 모달. 확인 콜백에서이 컨텍스트 정보를 사용하여 삭제할 사용자를 결정합니다.

demo here에서 테스트 할 수 있습니다.

Answer 2

사용자가 링크를 클릭하면 대화 버튼을 클릭 했음에도 제출됩니다. e.preventDefault();

$('a#delete').click(function(e){ 
    e.preventDefault(); 
    var anchor = this; 
    $('#deleteModal').modal('show'); 
    $('button#confirm').click(function(e){ 
     $('#deleteModal').modal('hide'); 
     $.ajax({ 
      url: $(anchor).attr('href'), 
      success:function(result){ 
       $(anchor).closest('tr').addClass("error"); 
       $(anchor).closest('tr').delay(2000).fadeOut(); 
      }}); 
    }); 
    return false; 
}); 

링크에 HREF 값을 넣어되지 않은이 작업을 수행하는 다른 방법 : 당신은 기본 동작을 방지 할 필요가있다.

<a id="delete" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a> 

및 JS :

$('a#delete').click(function(e){ 
    var anchor = this; 
    var del_link = '/admin/edit/user/delete/' + $(anchor).attr('user'); 
    $('#deleteModal').modal('show'); 
    $('button#confirm').click(function(e){ 
     $('#deleteModal').modal('hide'); 
     $.ajax({ 
      url: del_link, 
      success:function(result){ 
       $(anchor).closest('tr').addClass("error"); 
       $(anchor).closest('tr').delay(2000).fadeOut(); 
      }}); 
    }); 
    return false; 
}); 

당신이 모두 삭제 링크 같은 delete ID를 사용하십니까은 중복 어떤 종류의, 그래서 당신은 이미 사용자 속성을 가지고?

Answer 3

클릭 이벤트를 .unbind()로 연결 해제하거나 .one() 이벤트를 클릭하면 한 번만 실행되도록하십시오.

$('a#delete').one('click', function(e) { 

또는

$('a#delete').unbind().live('click', function(e) {