0

$.ajax({}) と外部の php スクリプトを使用して、データを更新および処理するための Javascript オブジェクトを作成しました。オブジェクトが呼び出されたときにオブジェクトから返されるテーブル要素には、(display:none に設定されたクラス「hidden」を使用して) いくつかの非表示の tr が含まれています。

オブジェクト内の表示関数は次のとおりです。

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 を検索し、それぞれを配列にプッシュしてから、それぞれを 1 つずつフェードする関数があります。

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 の一部ではないため、$(element).on(); などの JQuery 関数を使用する必要があります。または $(element).live(); しかし、私が試したことは何もありませんでした。テーブルはロードされていますが、テーブルが Ajax でロードされているため、JQuery は .each() を使用して各 tr を選択できないようです。

これに対する解決策/回避策を知っている人はいますか? JQuery を使用してテーブル内の各 tr をフェードインするよりも良い解決策はありますか?

4

2 に答える 2

2

動的データがロードされた後、イベント/アニメーションをバインドするだけでよいと思います。

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);
};
于 2013-06-21T22:05:07.690 に答える
2

.on メソッドを介して委任を使用する必要があるように思えます。javascript/jquery を使用して要素をフェードするために必要なことは、ページの読み込み時にページ上にある要素にイベント ハンドラーをアタッチすることです。

例えば：

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

または「クリック」があなたのイベントである同様のもの。

于 2013-06-21T22:08:01.270 に答える