javascript - 如何使用 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) {

这称为委托(delegate)事件。

由于您的原始代码是固定指向一个元素(可能是一组元素)，因此它仅将事件附加到元素一次，并且当创建更多克隆时，它们不会附加事件。

委托(delegate)事件基本上应用于父级(元素容器)，然后每当在父级中呈现标识的元素时，该元素就会立即附加。

您可以在这里阅读:Event Delegation