[英]How to submit multiple forms with Jquery AJAX
这是我的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> <b>"+ res +"</b></div>");
}
},
error: function () {
$('.SongStatus').html('Failed').slideDown();
}
});
});
});
你应该改变这个:
$('.songsForm').submit(function (event) {
对此:
$('.songsList .songRow').submit('.songsForm',function (event) {
这称为委托事件。
由于您的原始代码是指向一个元素(可能是一组元素),它只将事件附加到元素一次,并且当创建更多克隆时,它们没有附加事件。
委托事件基本上应用于父元素(元素容器),然后只要在父元素中呈现标识的元素,就会立即附加元素。
你可以在这里阅读: 活动授权
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.