.load()를 사용한 후 UI 모달 대화 상자가 열리지 않습니다.

Question

데이터베이스에서 레코드를 삭제할 때 표시되는 내 UI 삭제 대화 상자에 문제가 있습니다. 이미지를 클릭하면 예를 들어 사용자가 "oui"를 치면 확인 대화 상자가 표시됩니다. 레코드 삭제 후 테이블을 새로 고쳐야하므로 .load ("url")을 사용합니다. .load()을 사용한 후에 대화 상자를 열 수 없다는 점이 문제입니다. 여기 내 코드입니다 (그것의 자바 스크립트) : 내 JSP 페이지의 조각에 대한

(function(a){a(document).ready(function(c) 
{ 
//avec ce variable je recupere l'identificateur que je dois utilisé pour la suppresion et 
//l'edition de jour ferié 
var id; 
a("#da-ex-dialog-div").dialog(
{autoOpen:false, 
title:"Confirmation de suppression", 
modal:true, 
width:"340", 
resizable: false, 
buttons:[{text:"Oui",click:function(){a.ajax({type: "POST", cache: false,url:"/Pointagesgtt/deletejourferie?id="+id,success:function(){ a(".da-panel-content").load("/Pointagesgtt/listejourferie .da-table");alert("reusii");}});a(this).dialog("close");}},{text:"Non",click:function(){a(this).dialog("close");}}] 
}); 
a("#da-ex-dialog-form-div").dialog(
{autoOpen:false, 
title:"Edition jour férié", 
modal:true, 
width:"640", 
buttons:[{text:"Valider",click:function(){a(this).find("form#da-ex-dialog-form-val").submit();}}] 
}).find("#da-ex-dialog-dp").datepicker({dateFormat:"dd/mm/yy"}).end().find("form").validate({rules:{"jourferie.date":{required:true,date:true},"jourferie.occasion":{required:true},"jourferie.nombrejours":{required:true,digits:true,max:40}},invalidHandler:function(f,d){var g=d.numberOfInvalids();if(g){var e=g==1?"Vous avez manqué 1 champ. Il a été mis en évidence":"Vous avez manqué "+g+" champs. Ils ont été mis en évidence";a("#da-validate-error").html(e).show();}else{a("#da-validate-error").hide();}}});a(".da-ex-dialog-modal").bind("click",function(d){a("#da-ex-dialog-div").dialog("option",{modal:true}).dialog("open");d.preventDefault();/* la recuperation de ligne selectionné*/ id=a(this).closest("tr").attr("id");});a(".da-ex-dialog-form").bind("click",function(d){a("#da-ex-dialog-form-div").dialog("option",{modal:true}).dialog("open");d.preventDefault();}); 
}); 

} 

)(jQuery); 

: 어떤 도움을 이해할 수있을 것이다

<!-- Main Content Wrapper --> 
       <div id="da-content-wrap" class="clearfix"> 

        <!-- Content Area --> 
        <div id="da-content-area"> 

        <div class="grid_4"> 
          <div class="da-panel collapsible"> 
           <div class="da-panel-header"> 
            <span class="da-panel-title"> 
             <img src="images/icons/black/16/list.png" alt="" /> 
             Les Jours Fériés 
            </span> 

           </div> 
           <div class="da-panel-content"> 
            <table class="da-table"> 
             <thead> 
              <tr> 

               <th>Date</th> 
               <th>Occasion</th> 
               <th>Nombrejours</th> 

               <th></th> 
              </tr> 
             </thead> 
             <tbody> 
             <s:iterator value="listejourferie" var="jourferie"> 
              <tr id="<s:property value="jourferieId"/>"> 

               <td><s:property value="date"/></td> 
               <td><s:property value="occasion"/></td> 
               <td><s:property value="nombrejours"/></td> 

               <td class="da-icon-column"> 

                <a href="#"><img class="da-ex-dialog-form" src="images/icons/color/pencil.png" /></a> 
                <a href="#"><img class="da-ex-dialog-modal" src="images/icons/color/cross.png" /></a> 
               </td> 
              </tr> 

              </s:iterator> 
             </tbody> 
            </table> 
           </div> 

           <!-- Confirmation dialog --> 

     <div id="da-ex-dialog-div" style="display:none;"> 
       <p>Cet élément sera définitivement supprimé et ne peut pas être récupéré. Etes-vous sûr?</p> 
     </div> 

           <!--End confirmation dialog --> 

           <!-- Edit form dialog --> 

           <div id="da-ex-dialog-form-div" class="no-padding"> 
             <form id="da-ex-dialog-form-val" class="da-form"> 
              <div id="da-validate-error" class="da-message error" style="display:none;"></div> 
              <div class="da-form-inline"> 
               <div class="da-form-row"> 
                <label>Date<span class="required">*</span></label> 
                <div class="da-form-item small"> 
                <s:textfield id="da-ex-dialog-dp" name="jourferie.date" readonly="true"/> 
                </div> 
               </div> 


               <div class="da-form-row"> 
               <label>Nombre de jours<span class="required">*</span></label> 
               <div class="da-form-item small"> 
                <s:textfield name="jourferie.nombrejours" /> 
               </div> 
               </div> 

               <div class="da-form-row"> 
               <label>Occasion<span class="required">*</span></label> 
               <div class="da-form-item"> 
                <s:textfield name="jourferie.occasion" /> 
               </div> 
               </div> 

              </div> 
             </form> 
            </div>         
           <!-- End edit dialog --> 
          </div> 
         </div>             
        </div>       
       </div>      
      </div>     
     </div> 

     <!-- Footer --> 
     <div id="da-footer"> 
      <div class="da-container clearfix"> 
       <p>Copyright 2012. CandySoft. Tous droits réservés. 
      </div> 
     </div>    
    </div> 

.

Answer 1

대화 상자를 표시하는 데 사용되는 요소를로드하고 있기 때문에 상황이 발생할 수 있습니다.

// jQuery < 1.7 
a(".da-ex-dialog-modal").live("click",function(d){ 
    a("#da-ex-dialog-div").dialog("option",{modal:true}).dialog("open"); 
    d.preventDefault(); 
}); 

// jQuery >= 1.7 
// You can use `document` or a parent elements that you doesn't load it with AJAX 
// to delegate the event 
a("#da-content-area").on("click", ".da-ex-dialog-modal", function(d){ 
    a("#da-ex-dialog-div").dialog("option",{modal:true}).dialog("open"); 
    d.preventDefault(); 
});