形式/按鈕後停止工作ajax部分重新加載頁面後表格成功

Question

（如果我的英語不好，我來自pewdiepieland） 我有一個問題，癢地獄了我。

我有一個圖片庫的頁面。當每張照片登錄時都會得到一個表單，您可以在其中更改說明或刪除照片。我也有一個表格，你可以添加一個新的圖片到畫廊。

如果我添加圖片或刪除/編輯現有圖片，頁面中顯示所有圖片的部分將重新加載，以便加載新內容。 （因爲我不希望整個頁面重新加載，並且還想顯示關於發生了什麼的消息，例如「圖片已成功上傳/更改/刪除」）。

問題是重新加載的部件內部的窗體停止工作。如果我想刪除或編輯其他圖像，我需要重新加載整個頁面。 （提交新圖片的表單仍然有效，因爲它不在「頁面的重新加載部分」）

我必須重新加載javascriptfile或其他任何東西，或者我需要做什麼？

你們是否需要檢查一些代碼部分？這感覺就像我需要添加一些東西到我的代碼，以防止這個，而不是改變現有的..但嘿我知道什麼...

祝福和聖誕快樂！

UPDATE < <與Simplyfied代碼：

HTML/PHP

<form id="addimg" role="form" method="POST" enctype="multipart/form-data"> 
    <input type="file" name="img"> 
    <input type="text" name="imgtxt"> 
    <input type="submit" name="gallery-submit" value="Add Image"> 
</form> 

<div id="gallery_content"> 
    <?php 
    $result = mysqli_query($link, "SELECT * FROM gallery"); 
    $count = 1; 

    while($row = mysqli_fetch_array($result)) { 
     $filename = $row['filename']; 
     $imgtxt = $row['imgtxt']; 
     $id  = $row['id']; 

     echo '<div>'; 
     echo '<img src="gallery/' . $filename . '">'; 
     echo '<form id="editimg' . $count . '" role="form" method="POST">'; 
     echo  '<input type="text" name="imgtxt">'; 
     echo  '<input type="hidden" name="id">'; 
     echo  '<input type="submit" name="changeimgtxt" data-number="' . $count . '" value="Update" class="edit_img">'; 
     echo '</form>'; 
     echo '<button class="delete_img" value="' . $id . '">Delete</button>'; 
     echo '</div>; 
    } 
    ?> 
</div> 

JAVASCRIPT/JQUERY

$(document).ready(function() { 
    $('#addimg').submit(function(e) { 
     e.preventDefault(); 

     gallery('add', ''); 
    }); 

    $('.edit_img').click(function(e) { 
     e.precentDefault(); 
     var formNr = $(this).data('number'); 

     var dataString = $('#editimg' + formNr).serialize(); 
     gallery('edit', dataString) 
    }); 

    $('.delete_img').click(function(e) { 
     e.preventDefault(); 
     var imgid = $('this').value(); 

     gallery('delete', imgid); 
    }); 

    function gallery(a, b) { 
     if (a == 'add') { 
      var dataString = new FormData($('#addimg')[0]); 

      $.ajax({ 
       type: "POST", 
       url: "gallery_process.php", 
       data: dataString, 
       success: function(text){ 
        if(text == 'add_success') { 
         - Show success message - 
         $('#gallery_content').load(document.URL + ' #gallery_content'); 
        } else { 
         - Show fail message - 
        } 
       }, 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 

     } else if (a == 'edit') { 
      var dataString = b; 

      $.ajax({ 
       type: "POST", 
       url: "gallery_process.php", 
       data: dataString, 
       success: function(text){ 
        if(text == 'edit_success') { 
         - Show success message - 
         $('#gallery_content').load(document.URL + ' #gallery_content'); 
        } else { 
         - Show fail message - 
        } 
       } 
      }); 
     } else if (a == 'delete') { 
      var dataString = 'imgid=' + b; 

      $.ajax({ 
       type: "POST", 
       url: "gallery_process.php", 
       data: dataString, 
       success: function(text){ 
        if(text == 'delete_success') { 
         - Show success message - 
         $('#gallery_content').load(document.URL + ' #gallery_content'); 
        } else { 
         - Show fail message - 
        } 
       } 
      }); 
     } 
    } 
}); 

我不認爲你需要看到我的過程文件。任何線索？

Answer 1

你的問題可能是添加.click功能，並刪除圖像，將其更改爲$('body').on('click', 'delete_img', function() {// do something});

See Here

Answer 2

你的問題是，你只能在「文檔準備」掛鉤的.click()聽衆一次。

當$(document).ready()回調被執行時，圖庫已經被填充並且你點擊了當前在DOM中的元素的監聽器。當您重新加載圖庫時，它不再是相同的DOM元素，也沒有設置點擊偵聽器。有很多方法可以解決這個問題，例如，jQuery .load()需要一個complete回調，您可以在其中設置事件偵聽器。您的樣本適應此：

$(document).ready(function() { 
    var setupGalleryEventListeners = function() { 
     $('.edit_img').click(function(e) { 
      e.preventDefault(); 
      var formNr = $(this).data('number'); 

      var dataString = $('#editimg' + formNr).serialize(); 
      gallery('edit', dataString) 
     }); 

     $('.delete_img').click(function(e) { 
      e.preventDefault(); 
      var imgid = $('this').value(); 

      gallery('delete', imgid); 
     }); 
    }; 

    $('#addimg').submit(function(e) { 
     e.preventDefault(); 

     gallery('add', ''); 
    }); 

    setupGalleryEventListeners(); // Setup initial event listeners on page load 

    function gallery(a, b) { 
     if (a == 'add') { 
      var dataString = new FormData($('#addimg')[0]); 

      $.ajax({ 
       type: "POST", 
       url: "gallery_process.php", 
       data: dataString, 
       success: function(text){ 
        if(text == 'add_success') { 
         - Show success message - 
         $('#gallery_content').load(document.URL + ' #gallery_content', setupGalleryEventListeners); // setupGalleryEventListeners called when load is done 
        } else { 
         - Show fail message - 
        } 
       }, 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 

     } else if (a == 'edit') { 
      var dataString = b; 

      $.ajax({ 
       type: "POST", 
       url: "gallery_process.php", 
       data: dataString, 
       success: function(text){ 
        if(text == 'edit_success') { 
         - Show success message - 
         $('#gallery_content').load(document.URL + ' #gallery_content', setupGalleryEventListeners); // setupGalleryEventListeners called when load is done 
        } else { 
         - Show fail message - 
        } 
       } 
      }); 
     } else if (a == 'delete') { 
      var dataString = 'imgid=' + b; 

      $.ajax({ 
       type: "POST", 
       url: "gallery_process.php", 
       data: dataString, 
       success: function(text){ 
        if(text == 'delete_success') { 
         - Show success message - 
         $('#gallery_content').load(document.URL + ' #gallery_content', setupGalleryEventListeners); // setupGalleryEventListeners called when load is done 
        } else { 
         - Show fail message - 
        } 
       } 
      }); 
     } 
    } 
});