Question

我使用$ .ajax（{}）和外部php脚本创建了一个Javascript对象来更新和处理数据。调用对象时从对象返回的表元素包含许多隐藏的tr（使用“hidden”类，设置为display：none）。

这是对象内的显示功能：

this.displayData = function(location_div) {
    var location_div = location_div;
    $.ajax({
            url:"display_data.php",
            type: "POST", 
            success:function(response){ 
                $(location_div).html(response);
                },
            error:function(response){alert("Error Displaying Problems." + response)},
        });
    };

显示：

<div id="location_div">
    <table>
        <tbody>
            <tr class="hidden"></tr>
            <tr class="hidden"></tr>
            <tr class="hidden"></tr>
            <tr class="hidden"></tr>
        </tbody>
    <table>
</div>

（注意：“＃location_div”是传递给“displayData（location_div）”的元素）

我遇到的问题是当JQuery尝试访问返回的数据时。我有一个查找所有tr的函数，将每个函数推送到一个数组，然后逐个淡化每一个。

var elements_array = new Array();
$("#location_div table tbody").children().each(function() {
    elements_array.push(this);
});
//function for fading in each element in the array
fadeAllIn(elements_array);

据我了解，加载Ajax的元素不是DOM的一部分，因此需要使用JQuery函数，如$（element）.on（）;或$（元素）.live（）;但是，我没有尝试过任何工作。正在加载表，但是JQuery似乎无法使用.each（）选择每个tr，因为该表是Ajax加载的。

有谁知道解决方案/解决方法吗？有没有比使用JQuery淡出表中的每个tr更好的解决方案？

Answer 1

我认为你只需要在加载动态数据后绑定你的事件/动画。

this.displayData = function(location_div) {
var location_div = location_div;
$.ajax({
        url:"display_data.php",
        type: "POST", 
        success:function(response){ 
            $(location_div).html(response);
            bind_events();                
        },
        error:function(response){alert("Error Displaying Problems." + response)},
    });
};

var bind_events = function(){
    var elements_array = new Array();
            $("#location_div table tbody").children().each(function() {
                 elements_array.push(this);
            });
            fadeAllIn(elements_array);
};

Answer 2

听起来我需要通过.on方法使用委托。使用javascript / jquery淡化元素需要做的是将事件处理程序附加到页面加载时页面上的元素。

例如：

$("location_div").on("click", "table tbody", function() { [function] });

或类似的“click”是您的活动。

JQuery处理程序在Ajax函数之后无法访问数据

2 个答案: