Question

JQuery无法识别表的动态添加数据。样本标签下面的前两个按钮功能很好，我声明为静态标记只是为了测试而且它可以工作，但是表中相同类的按钮不起作用。我很坚定这个问题。

<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);
          }

        });

});

});

如果已经声明了jquery函数是否无法识别新添加的标记？感谢。

Answer 1

您需要将 event delegation 用于动态加载的元素：

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

请注意，该按钮的HTML也无效，您需要在=属性之前删除value，我建议您改为使用data-*属性：

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

JQuery - 无法识别动态元素

1 个答案: