jQuery委托未在动态创建的表上触发 [英] jQuery delegate not firing on dynamically created table

问题描述

我的.js文件中包含以下代码

I have the following code that resides in my .js file

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

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

It basically adds and removes a style to a table row. This works perfectly for tables that are created are runtime.

但是对于动态创建的表却无济于事. 这就是创建表的方式.

However for tables that are dynamically created it doesn't do a thing. This is how a table is being created.

//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查询，并使用此代码将行添加到表的正文中 $('#enqTable> tbody:last').append

To summarise, this function creates a new table in my enqResults div, runs an ajax query, and adds rows to the tbody of the table with this code $('#enqTable > tbody:last').append

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

Why can delegate not bind to these elements?

推荐答案

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

From the looks of your code it appears you are appending the table element dynamically too - this is the problem. The primary selector of the delegate() method must be a static element - ie, one that is present on page load, and for the entire life of the page.

我可以看到您将表追加到.enqResults元素，请牢记这一点，

I can see you are appending your table to the .enqResults element, with that in mind, try this:

//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委托未在动态创建的表上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！