I have a search function and it adds elements on keyup, it is working on elements that are not appended or originally in the DOM.
here is where i add new elements through ajax
foreach ($posts as $post) {
$output .= "<tr><td>".$post->registration_date."</td>".
"<td class='edit'>".$post->pat_bdate."</td>".
"<td class='edit'>".$post->pat_lname."</td>".
"<td>".$post->pat_fname."</td>".
"<td>".$post->weight."</td>".
"<td>".$post->height."</td>".
"<td>".$post->age."</td>".
"<td>".$post->sex."</td>".
"<td>".$post->mother_name."</td>".
"<td>".$post->address."</td>".
"<td><a href='posts/".$post->id."'><p>View Profile</p></a><td>".
"<td><a href='checkup/".$post->id."'><p>Check Up</p></a><td></tr>";
}
Here is the event that triggers the .editable but its not working on new added elements. But its working on elements that are originally there already
$(document).on('click', ".edit", function () {
$(this).trigger('edit');
});
$('.edit').editable('posts/update', {
event: 'edit',
select : true,
submitdata : function(value, settings) {
return {_method: "PUT",_token:token,col:$(this).attr("class").split(' ')[1]};
}
The search ajax
$.ajax({
type: 'GET',
url: url,
data: {search:value},
success: function(data){
if (value == '') {
$("#p_list tr").show();
$("tbody#search").html('');
}else if (data.no!=="") {
$("#p_list tr").hide();
$("tbody#search").html(data);
}
}
});