JQuery - Dynamic elements not recognized

Question

JQuery not recognizing the dynamically added data of the table. The first two button below the sample label function well, which i declared as a static markup just to test and it works, but the button with the same class in the table not function. Im so nuts with this problem.

<a class='btnView' href='#viewModal' data-toggle'modal' =value='FA-0000000'><i class='icon-eye'></i></a>

loadTable.js

var base_url = window.location.origin;
$(document).ready(function(){
 url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/loadTbodyHome";
 alert("loadtable.js");
 $.ajax(
 {
 type: "GET",
 url: url,
 success: function(data){
 $("#loadTbodyHome").html(data);
 },
 error: function (xhr, ajaxOptions, thrownError) {
 alert("XHR:"+xhr.status+"Error:"+thrownError);
 }
 });
 $('#searchFromHomeTable').keyup(function(){
 url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/loadTbodyHomeSearch";
 //alert('pumasok');
 search = $("#searchFromHomeTable").val();
 $.ajax(
 {
 type: "GET",
 url: url,
 data: "toSearch="+search,
 success: function(data){
 //alert(data);
 $("#loadTbodyHome").html('');
 $("#loadTbodyHome").html(data);
 },
 error: function (xhr, ajaxOptions, thrownError) {
 alert("XHR:"+xhr.status+"Error:"+thrownError);
 }
 });
 });
 });

dataModal.js

var base_url = window.location.origin;
$(document).ready(function(){
alert("datamodal.js");
$(".btnView").click(function(){
 alert($(this).attr('value'));
 url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/viewInfo";
 $.ajax(
 {
 type: "GET",
 url: url,
 data: "ID="+$(this).attr('value'),
 success: function(data){
 //alert(data);
 //alert(data);
 $("#viewModalBody").html('');
 $("#viewModalBody").html(data);
 $("#viewModal").attr('aria-hidden',false);
 $("#viewModal").fadeIn();
 },
 error: function (xhr, ajaxOptions, thrownError) {
 alert("XHR:"+xhr.status+"Error:"+thrownError);
 }
 });
});
});

Is the jquery functions not recognizing the newly added markup if its already declared? Thanks.

• elclanrs: Look for "event delegation".
• Lee Taylor: api.jquery.com/on Look for "Delegated events" within the linked page

Answer 1

You need to use event delegation for dynamically loaded elements:

$(document).on('click','.btnView',function(){
 // Your code here
});

Please note that your HTML for the button is also invalid, you need to remove = before value attribute and I'd suggest you to use data-* attribute instead:

<a class='btnView' href='#viewModal' data-toggle'modal' data-value='FA-0000000'><i class='icon-eye'></i></a>