如何使用jQuery AJAX提交多個表單

Question

這裏是我的HTML和jQuery Ajax代碼，我希望當第一行成功進行時，由jquery創建一個新行。但是第一行正常工作並繼續，但是當第二行由ajax創建時。它不起作用，當我提交時，它在同一頁面上重定向。請檢查我的代碼，並讓我知道爲什麼我的第二行無法正常工作。我如何處理這種情況？

HTML代碼：

<div id="songsList">  
    <div class="songRow"> 
    <div class="SongStatus"></div> 

     <form action="" method="POST" class="songsForm"> 
     <div class="col-sm-3"> 
      <input type="text" name="song_title" class="form-control" placeholder="Song Title"> 
     </div> 
     <div class="col-sm-2"> 
      <input type="text" name="singer_name" class="form-control" placeholder="Singer Name"> 
     </div> 
     <div class="col-sm-2"> 
      <input type="text" name="album_name" class="form-control" placeholder="Album Name"> 
     </div> 
     <div class="col-sm-1"> 
      <input type="text" name="album_year" class="form-control" placeholder="Year"> 
     </div> 
     <div class="col-sm-3"> 
      <input type="text" name="song_url" class="form-control" placeholder="Song Url http://"> 
     </div> 

     <input type="hidden" name="songsSubmit" value="yes"> 

     <div class="copySongUrl"><button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-upload"></i> Upload</button></div> 

     </form> 
    </div> 
    <hr /> 
</div> 

jQuery的/ Ajax代碼：

$(function() { 
    $('.songsForm').submit(function (event) { 
    event.preventDefault(); 
    event.returnValue = false; 
    $.ajax({ 
     type: 'POST', 
     url: 'post.php', 
     data: $(this).serialize(), 
     beforeSend: function() { 
      $(".copySongUrl :button").remove(); 
      $(".copySongUrl").append('<img src="images/ajax-loader.gif" class="ajaxImage">'); 
     }, 
     success: function(res) { 
      if (res == 'success') { 

       $(".ajaxImage").remove(); 
       $('input[name=song_title]').attr("disabled", true); 
       $('input[name=singer_name]').attr("disabled", true); 
       $('input[name=album_name]').attr("disabled", true); 
       $('input[name=album_year]').attr("disabled", true); 
       $('input[name=song_url]').attr("disabled", true); 

       $('.copySongUrl').append("<button type='button' id='plain-copy' class='btn btn-info'><i class='glyphicon glyphicon-paperclip'></i> Copy Url</button><script>document.getElementById('plain-copy').addEventListener('click', function() { clipboard.copy('<?php if(isset($_SESSION['uploadedUrl'])) echo $_SESSION['uploadedUrl']; ?>').then(function(){ document.getElementById('plain-copy-result').textContent = 'success'; }, function(err){ document.getElementById('plain-copy-result').textContent = err; });});<\/script>"); 

       // Here Adding New Row, Similar Like Top HTML 
       $('#songsList').append('<div class="songRow"> <div class="SongStatus"></div> <form action="" method="POST" class="songsForm"><div class="col-sm-3"><input type="text" name="song_title" class="form-control" placeholder="Song Title"></div><div class="col-sm-2"><input type="text" name="singer_name" class="form-control" placeholder="Singer Name"></div><div class="col-sm-2"><input type="text" name="album_name" class="form-control" placeholder="Album Name"></div><div class="col-sm-1"><input type="text" name="album_year" class="form-control" placeholder="Year"></div><div class="col-sm-3"><input type="text" name="song_url" class="form-control" placeholder="Song Url http://"></div><input type="hidden" name="songsSubmit" value="yes"><div class="copySongUrl"><button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-upload"></i> Upload</button></div> </form></div><hr />'); 

      } else { 

       $(".ajaxImage").remove(); 
       $(".copySongUrl").append('<button type="submit" class="songUploadButton" class="btn btn-primary"><i class="glyphicon glyphicon-upload"></i> Upload</button>'); 
       $(".SongStatus").append("<div class='alert alert-info'><li class='glyphicon glyphicon-warning-sign'></li>&nbsp;&nbsp;<b>"+ res +"</b></div>"); 
      } 
     }, 
     error: function() { 
      $('.SongStatus').html('Failed').slideDown(); 
     } 
    }); 
    }); 
}); 

Answer 1

你應該改變這樣的：

$('.songsForm').submit(function (event) { 

這樣：

$('.songsList .songRow').submit('.songsForm',function (event) { 

這被稱爲委託事件。由於您的原始代碼是引腳指向一個元素（可能是一組元素），它只會將事件附加到元素/ s，並且當創建更多的克隆時，它們不會附加事件。

委託事件基本上應用於父（元素容器），然後每當在父代中呈現標識的元素時，該元素立即連接。

你可以在這裏閱讀：Event Delegation