jQuery 功能無法使用.load() 刷新 div 標簽

Question

我正在使用 ajax 帖子將我的值發送到（uploadsignupeditadvcheck.php）。 提交成功后，我需要刷新我的 div 標簽 (galleryadv) 以准備下一次提交。 我的 ajax 提交成功，但刷新后我的 jquery function 不再工作。 我很感激你們，可以幫助我的情況。 謝謝你。

index.php

<script>
    function uploadadv(){
        
          var idadv = document.getElementById("idadv").value;
          var companynameadv = document.getElementById("companynameadv").value;  
          var usernameadv = document.getElementById("usernameadv").value;        
          var aboutmeadv = $("#aboutmedecsadv").val();
          var catadv = document.getElementById("catadv").value;
          var typeadv = document.getElementById("typeadv").value;
          var keywordadv = document.getElementById("keywordadv").value;  
          var addressadv = document.getElementById("addressadv").value;    
          var countryadv = document.getElementById("countryadv").value;
          var zipadv = document.getElementById("zipadv").value;
          var stateadv = document.getElementById("stateadv").value;
          var cityadv = document.getElementById("cityadv").value; 
          var urladv = document.getElementById("urladv").value; 
          var priceadv = document.getElementById("priceadv").value; 
          var advstamp = document.getElementById("advstamp").value; 
        
        
        var myData = 'idadv='+idadv+ '&companynameadv='+companynameadv+ '&usernameadv='+ usernameadv+ '&aboutmeadv='+aboutmeadv+ '&catadv='+catadv+ '&typeadv='+typeadv+ '&keywordadv='+ keywordadv+ '&addressadv='+ addressadv+ '&countryadv='+ countryadv+ '&zipadv='+ zipadv+ '&stateadv='+ stateadv+ '&cityadv='+ cityadv+ '&urladv='+ urladv+ '&priceadv='+ priceadv+ '&advstamp='+ advstamp;

        jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "uploadsignupeditadvcheck.php", //Where to make Ajax calls
        dataType:"text", // Data type, HTML, json etc.
        data:myData, //Form variables
        success:function(data){ 
            
           $('#messageeditcheckadv').html(data);

        },
        
        
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError);
        }
        });  
    };
</script> 


 <script>
                                                 
 var btn_edit = $(".avatar-galleryadv"),    
 btn_save = $(".avatar-previewgalleryadvsave");
 
 
 btn_save.hide(0);

 
 btn_edit.on("click", function() {
    $(this).hide(0);
   
    btn_save.fadeIn(300);
});

 btn_save.on("click", function() {
    $(this).hide(0);
    
    btn_edit.fadeIn(300);
 });
    
    
 </script>   



<script>  

   $( ".fa-map-marker" ).click(function() {
      $( ".navtumbler" ).toggle( "fast" );
    });  
   
</script> 




 <div class="galleryadv">               

    <div class="avatar-galleryadv">
                                 
       <div class="avatar-editgalleryadv">
             <input type='file' id="uploadFileadv" accept=".png, .jpg, .jpeg" />
             <label for="imageadv"></label>
       </div>
                                       
       <div class="avatar-previewgalleryadv">
             <div id="imagePreviewgalleryadv" style="background-image: url(images/whitecamera.png); background-color:#181818; background-size:contain; background-repeat:no-repeat;"> 
             </div> 
       </div>

    </div>
                  


    <div class="avatar-previewgalleryadvsave">
       <i class="fa fa-floppy-o" aria-hidden="true" id="uploadimageadv" style="margin:1px 0px 0px 0.4px;"></i>
    </div>


    <div class="igVideoData" style="color:#FFF; float:left;">
                                                             
     
     <i class="fa fa-map-marker spriteTemplate" aria-hidden="true" ></i> 
                                         
                                                  
    </div>  

</div>           

上傳signupeditadvcheck.php

$(".galleryadv").load(location.href+" .galleryadv>*");

Answer 1

您正在覆蓋之前附加事件處理程序的 dom 元素。 因此，您首先將單擊事件附加到按鈕，然后加載新的 HTML 並覆蓋附加了處理程序的按鈕，因此新按鈕沒有附加事件處理程序，這就是它們不響應單擊事件的原因。

將事件處理程序附加到不會被覆蓋的父元素，或者在加載並使用新的 html 覆蓋后重新附加事件處理程序。

我可能會 go 將事件附加到它們的父級，因此當事件向上傳播到 dom 樹時會得到處理。

var buttons_parent = $('.galleryadv');

buttons_parent.on('click', '.avatar-galleryadv', function(){    
    $(this).hide(0);   
    $('.avatar-previewgalleryadvsave').fadeIn(300);
});

buttons_parent.on('click', '.avatar-previewgalleryadvsave', function(){
    $(this).hide(0);   
    $('.avatar-galleryadv').fadeIn(300);
});

這代替了btn_edit.on("click", function() {...和btn_save.on("click", function() {... 。我也沒有通過它們的引用來引用處理程序中的按鈕保存在變量中，因為這些在覆蓋它們后將無效，所以我總是通過它們的 class 名稱來查找它們。

這樣，即使按鈕被覆蓋，處理其點擊事件的處理程序也是完整的。