Using class name to trap .click() event - ajax

Question

My ajax code is not catching the .click event with following type of code wherein I trying to trap the .click event using view_data.
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Need to Pud ID and Name of Work here..What the....</h4>
</div>
<div class="modal-body" id="workstatustable">
<input type="button" name="AMWP/2017-18/1" value="AMWP/2017-18/1" id="AMWP/HQTC/2017-18/1" class="btn btn-info btn-xs view_data">
<input type="button" name="AMWP/2017-18/2" value="AMWP/2017-18/2" id="AMWP/HQTC/2017-18/2" class="btn btn-info btn-xs view_data">
<input type="button" name="AMWP/2017-18/3" value="AMWP/2017-18/3" id="AMWP/HQTC/2017-18/3" class="btn btn-info btn-xs view_data">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info btn-sm" data-dismiss="modal">Update Status</button>
<button type="button" class="btn btn-info btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
my ajax code is as follows:-
$('.view_data').click(function(){
var modwork_id = $(this).attr("id");
$('#show_modid').html($(this).attr("id"));
fetchModal();
});
function fetchModal() {
var modwork_id = $("#show_modid").html();
window.alert($("#show_modid").html());
$('#viewstatus_Modal').modal("show");
$.ajax({
url:"workstatus.php",
method:"POST",
data:{modwork_id:modwork_id},
success:function(data){
$('#workstatustable').html(data);
$('#viewstatus_Modal').modal("show");
}
});
};
The issue is the modal window is not popping up.

Answer 1

the problem is in here.
you didn't declare the class properly as u write in ajax is .view_data and #show_modid
you have to do this >>
class="modal view_data fade "
so you can use ".view_data" in your ajax.
and do this >>
"#dataModal"
in your ajax
hope this will help you.

Answer 2

I got the soulution to the problem. I was trying to attach a function() to HTML item before the item/element was declared or found on the page. I inserted the ajax() call in the Success: clause. The plan is now working. Thanks.

Answer 3

Got It... I have relocated the position of the ajax() and its cool....
function fetchModal() {
var modwork_id = $("#show_modid").html();
window.alert($("#show_modid").html());
$('#viewstatus_Modal').modal("show");
$.ajax({
url:"workstatus.php",
method:"POST",
data:{modwork_id:modwork_id},
success:function(data){
$('#workstatustable').html(data);
$('#viewstatus_Modal').modal("show");
$('.view_data').click(function(){
var modwork_id = $(this).attr("id");
$('#show_modid').html($(this).attr("id"));
fetchModal();
});
}
});
};