jQuery委托未在动态创建的表上触发

Question

我的 .js 文件中有以下代码

//This is the row highlighting for the results table
$(document).ready(function () {
    $("table").delegate('td', 'mouseover mouseleave', function (e) {
        if (e.type == 'mouseover') {
            $(this).parent().addClass("hover");

        } else {
            $(this).parent().removeClass("hover");
        }
    });
});

它基本上为表格行添加和删除样式。 这对于在运行时创建的表非常有效。

但是对于动态创建的表，它没有任何作用。 这就是创建表的方式。

//This function is called from the homepage, it calls for XML to be passed and renders the table with
//Existing enquiries
function loadEnqData() {

//Display ajax load graphic
showLoading('.enqLoading');

//Build results table, ready to receive results.
$('.enqResults').append('<table id="enqTable" class="enqTable"><thead><tr><th>' + textlib.get('lblEnqDate') + '</th><th>' + textlib.get('lblEnqUser') + '</th><th>' + textlib.get('lblEnqClientName') + '</th><th>' + textlib.get('lblEnqDetails') + '</th></tr></thead><tbody></tbody></table>');

//URL for XML data
var strURL = "enqData.aspx";
if (debug) {
    $.jGrowl('url= ' + strURL);
}
//Ajax call
$.ajax({
    type: "GET",
    url: strURL,
    dataType: "xml",
    timeout: 30000,
    success: function (xml) {
        //process XML results for each xml node
        $(xml).find('row').each(function () {

            if (debug) {
                $.jGrowl('Returned id of ' + $(this).attr('id'));
            }

            //Set data variables
            var strEnqID = $.trim($(this).attr('id'));
            var strEnqDate = $.trim($(this).attr('DateTimeLogged'));
            var strEnqClient = $.trim($(this).attr('Client_Name'));
            var strEnqDetails = $.trim($(this).attr('Work_Details'));
            var strEnqUsername = $.trim($(this).attr('username'));

            //Add in a data row to the results table.
            $('#enqTable > tbody:last').append('<tr onclick="selectEnq(\'' + strEnqID + '\');"><td>' + strEnqDate + '</td><td>' + strEnqUsername + '</td><td>' + strEnqClient + '</td><td>' + strEnqDetails + '</td></tr>');
        });
        //Tidy up
        $('.enqLoading').empty();

        //Enable sorting
        $(document).ready(function () {
            $("#enqTable").tablesorter();
        }
    );
        //Catch errors
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        $.jGrowl("Error Please contact IT support - " + XMLHttpRequest.responseText + " " + XMLHttpRequest.status + " " + textStatus + " " + errorThrown, { sticky: true });

    }
});


}

总而言之，此函数在我的 enqResults div 中创建一个新表，运行一个 ajax 查询，并使用此代码将行添加到表的 tbody $('#enqTable > tbody:last').append

为什么delegate不能绑定到这些元素上？

Answer 1

从您的代码看来，您似乎也在动态附加 table 元素 - 这就是问题所在。 delegate() 方法的主要选择器必须是静态元素 - 即，在页面加载时以及页面的整个生命周期中都存在。

我可以看到您正在将表格附加到 .enqResults 元素，考虑到这一点，试试这个：

//This is the row highlighting for the results table
$(document).ready(function () {
    $(".enqResults").delegate('table td', 'mouseover mouseleave', function (e) {
        if (e.type == 'mouseover') {
            $(this).parent().addClass("hover");

        } else {
            $(this).parent().removeClass("hover");
        }
    });
});