jQuery submit button doesn't work on load - php

Question

when i load the page normally everything is going, the form is submitted and i get the right responses .. but when i load the page with .load() function jQuery the form doesnt submitted! and i get nothing from Ajax function!! any help
this is my 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! Create</td>
</tr>
#endif
</tbody>
</table>
</div>
</div>
</div>`
this is my script file :
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++;
});
});
},
})
});
});
});
`

Answer 1

I suspect its happening due to your HTML form is getting loaded via ajax and before that only your $(document).ready( code is getting executed. Hence at that time there will be no element with id edit-content-form present in DOM. So to deal with this situation try using event delegation technique like below:
$(function(){
$(document).on('submit','#edit-content-form',function(e){
// your existing code goes here
});
});
We are attaching the event listener to the document object which will be there for sure and then delegating to #edit-content-form whenever event occurs.