当我正常加载页面时，一切都在进行，表单已提交，我得到正确的答案..但是当我用.load()函数jQuery加载页面时表单没有提交！我从Ajax函数中得不到任何东西！任何帮助
这是我的HTML：
<div class="container">
<div class="row">
<h4>Manage Contents</h4>
<div class="table-responsive table3">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Content</th>
<th>Owner</th>
<th>Created Date</th>
<th>Project</th>
<th>Priorty</th>
<th>Options</th>
</tr>
</thead>
<tbody>
@if ($availabe >= 1 )
<?php $i =1; ?>
@foreach ($avashown as $key)
<?php //this is edit content form?>
@if(isset($index) && $index == $i && isset($editid) && isset($idexist) && $idexist == $key->id)
<tr>
<form id="edit-content-form" action="/testajax" method="POST">
<td>{{ $i }}</td>
<td hidden="hidden">{{ csrf_field() }}</td>
<td hidden="hidden"><input type="hidden" name="id" value="{{ $editid }}"></td>
<td hidden="hidden"><input type="hidden" name="index" value="{{ $index }}"></td>
<td colspan="3">
<div class="control-group" id="inputField1">
<input class="form-control" type="text" name="content" value="{{ $key->content }}">
<span class="help-block hideme" id="help-block1"></span>
</div>
</td>
<td colspan="1">
<div class="control-group" id="inputField2">
<select class="form-control" name="project">
@foreach ($projects as $project)
<option value="{{ $project->id }}">{{ $project->projectname }}</option>
@endforeach
</select>
<span class="help-block hideme" id="help-block2"></span>
</div>
</td>
<td colspan="1">
<div class="control-group" id="inputField3">
<select class="form-control" name="priority">
@foreach ($priorities as $priority)
<option value="{{ $priority->id }}">{{ $priority->value }}</option>
@endforeach
</select>
<span class="help-block hideme" id="help-block3"></span>
</div>
</td>
<td>
<input type="submit" id="submitForm" name="submit" value="Done">
</td>
</form>
</tr>
<?php $i++;//i have to increase it here again?>
@else
<tr>
<td class="hidden"></td>
<td>{{ $i }}</td>
<td>{{ $key->content }}</td>
<?php $firstname = \App\User::find($key->owner_id);?>
<td>{{ ucfirst($firstname->firstname) }}</td>
<td>{{ $key->created_at }}</td>
<?php $projectname = \App\Project::find($key->project_id);?>
<td>{{ $projectname-> projectname }}</td>
<?php $priorty = \App\Priority::find($key->priority_id);?>
<td><span class ="label label-{{ $priorty->name }}">{{ $priorty->value }}<span></td>
<td>
<span class="glyphicon glyphicon-trash" data-toggle="tooltip" data-placement="bottom" title="Delete" onclick="ContentStatus('delete/ajax/{{ $key->id }}')"></span><span> </span>
<span id="editContentGlyph" data-toggle="tooltip" data-placement="bottom" title="Edit" class="glyphicon glyphicon-cog" onclick="editContent({{ $i }},{{ $key->id }})"></span>
</td>
<?php $i++; ?>
</tr>
@endif
@endforeach
@else
<tr>
<td>0</td>
<td colspan="6">Let's Work and Add some Contents! <a href="/new_content" data-toggle="tooltip" data-placement="bottom" title="Create">Create</a></td>
</tr>
@endif
</tbody>
</table>
</div>
</div>
</div>`
这是我的脚本文件：
function editContent(index,id){
var place = ".table3 tbody tr:nth-child("+index+") " ;
var place = "#alltables" ;
var des = place+" > *";
$(document).ready(function(){
$( place ).load("http://localhost:8000/manage_contents/"+index+"/"+id+" "+des, function(){
});
});
}
$(document).ready(function(){
$(function(){
$('#edit-content-form').on('submit',function(e){
$.ajaxSetup({
header:$('meta[name="_token"]').attr('content')
})
e.preventDefault(e);
$.ajax({
type:"PUT",
url:'http://localhost:8000/testajax',
data:$(this).serialize(),
dataType: 'json',
success: function(data){
$("#alerts").html(data.responseText);
if (data.updated) {
var place = ".table3 tbody tr:nth-child("+data.index+") " ;
var des = place+" > *";
$( place ).load("http://localhost:8000/manage_contents/ "+des, function(){
});
}
},
error: function(data,xhr, ajaxOptions, thrownError){
$.each(data.responseJSON, function(){
var i = 1;
$.each(this, function(index,error) {
$("#inputField"+i).addClass(" has-error");
$("#help-block"+i).removeClass(" hideme");
$("#help-block"+i).html("<strong>"+error+"</strong>");
i++;
});
});
},
})
});
});
});
`
答案 0 :(得分：0)
我怀疑由于您的HTML form是通过ajax加载而发生的，之前只有您的$(document).ready(代码正在执行。因此，那时DOM中不存在id edit-content-form的元素。因此，要处理这种情况，请尝试使用如下的事件委派技术：
$(function(){
$(document).on('submit','#edit-content-form',function(e){
// your existing code goes here
});
});
我们将事件监听器附加到document对象，该对象将确保存在，然后在发生事件时委托给#edit-content-form。