jQueryUI 모달 대화 상자 내의 스크립트는 한 번만 작동합니다.

Question

행을 클릭하면 사용자가 해당 레코드를 편집 할 수 있도록 jQueryUI 모달 대화 상자를 시작하는 테이블이 있습니다. 나는 성공적으로 AJAX 사용하여 관련 레코드의 세부 사항을로드 작동하는 것 같다 다음 스크립트 사용 : 그것은 내가 기록을 클릭 처음으로 작품을 좋아

$("#datatbl tr").bind('click', function() {   
     var url = 'item_edit.asp?id='+$(this).attr("data-myid"); 
     var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body'); 
     // load remote content 
     dialog.load(
      url, 
      {}, 
      function (responseText, textStatus, XMLHttpRequest) { 
       dialog.dialog({   
        height: 440, 
        width: 550, 
        autoOpen: false, 
        modal: true, 
        buttons: { 
         "Update this record": function() { 
         $('#editform').submit(); 
          }, 
         Cancel: function() { 
         $(this).dialog("close"); 
         } 
        } 
     }); 
     dialog.dialog('open'); 
      } 
     ); 
     //prevent the browser to follow the link 
     return false; 
}); 

,하지만 내가 클릭하면 취소하고 다른 레코드를 편집하려고 , 다이얼로그 박스가 나타나지만 정확한 기록 세부 사항이 표시됩니다. 대화 상자 내에서 스크립트가 작동하지 않습니다. 예 : jqueryUI datepicker 입력과 유효성 검사가 있습니다.

자바 스크립트 오류가 없으며 FireBug에 대한 제한된 이해로 인해 잘못된 정보를 찾을 수 없으므로 계속 진행하는 방법에 대해 조언 해 주시면 감사하겠습니다.

편집 : Argh! 때로는 명백한 점을 알아 내기 위해 여기에 타이핑하는 것과 같은 것이 필요합니다. 방금 상자가 닫힐 때 대화 상자에 대해 만들어진 DIV가 파괴되지 않는다는 것을 알게되었습니다. 이렇게하기 위해 라인을 추가했는데 이제 작동합니다. 듣기 주셔서 감사합니다. :) 나중에 참조

, 나는 'VAR 대화'에서 만든 DIV에 ID를 추가하고, 취소 기능에서 제거 : 사람이 더 나은 제안하는 경우

Cancel: function() { 
         $(this).dialog("close"); 
         $('#dialogbox').remove(); 
         } 

난 여전히 감사하겠습니다 이 동작을 처리하는 방법.

Answer 1

해결 : 상자를 닫으면 대화 상자 용으로 생성 된 DIV가 파괴되지 않습니다.

나는 'VAR 대화'에서 만든 DIV에 ID를 추가하고, 취소 기능에서 DIV 제거 :

이

Cancel: function() { 
         $(this).dialog("close"); 
         $('#dialogbox').remove(); 
         } 

Answer 2

한 번에 대화 상자를 만들 수 있지만 콘텐츠를로드 할 때마다 만들지는 말고 autoOpen을 false로 설정하면됩니다.

<div id="dialog"> 
    <div id="content" style="display:hidden" title="Record details:"></div> 
</div> 

$('#dialog').dialog({ 
    height: 440, 
    width: 550, 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     "Update this record": function() { 
      $('#editform').submit(); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 
$("#datatbl tr").bind('click', function() {   
    var url = 'item_edit.asp?id='+$(this).attr("data-myid"); 
    // load remote content 
    $('#content').load(url); 
    $('#dialog').dialog('open'); 
    return false; 
}};