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＆gt; tbody：last'）。追加

为什么委托不能绑定到这些元素？

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

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

1 个答案: