AJAX後のフォーム/ボタンストップ作業フォームの成功後に部分的にページをリロードする

Question

（私の英語は悪いですが、私はpewdiepieland出身です） 私は地獄をかき立てるという問題があります。

私には画像ギャラリーがあるページがあります。ログインすると、すべての画像がフォームを取得して、説明を変更したり、画像を削除したりすることができます。ギャラリーに新しい絵を追加することもできます。

画像を追加したり、既存の画像を削除/編集したりすると、画像がすべて表示されている部分が読み込まれ、新しいコンテンツが読み込まれます。 （私はページ全体がリロードされるのを望まず、何が起こったかについてのメッセージを表示したいので、例えば "画像は正常にアップロード/変更/削除されました"）。

問題は、リロードされた部品の内部のフォームが機能しなくなることです。別のイメージを削除または編集したい場合は、ページ全体をリロードする必要があります。 （新しい画像を送信するフォームは、「ページのリロードされた部分」の外にあるので、まだ機能します）

JavaScriptのファイルやその他のものをリロードする必要がありますか？

あなたはコードの一部を確認する必要がありますか？既存のものを変更するのではなく、これを防ぐために私のコードに何かを追加する必要があるように感じるが、何を知っているのだろうか...

ベスト・ウィッシュとメリー・クリスマス！

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機能ですので、あなたの問題は、あなただけの「準備文書」に一度.click()リスナーをフックアップということである$('body').on('click', 'delete_img', function() {// do something});

See Here

Answer 2

に変更した画像を削除します。

$(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 - 
        } 
       } 
      }); 
     } 
    } 
});