JQuery関数はページのロード時のみ動作し、AJAxのデータロード後は実行できません。

Question

次のスクリプトがあります。ページが初めてロードされたときにFindPromo()と呼びます。特に、HTML Tableの子が待機するまで待機します。

その後tdは、ユーザーに現在あることを確認するために、クラス.promotionで、同じ時のチェックですべてtd'sを見つけることが、我々はそれに追加promoSelectを割り当てている場合checkvisibleを呼び出すことにより、閲覧、我々はまた、ときにこれを呼び出しますユーザーがスクロールしてテーブルをスクロールし、クラスのtdが表示されたら、再びpromoSelectを割り当てます。

私たちは、その後、tableがクラスpromoSelectを持っており、取得td'sはそれから値だ見つけループGetPromoこれを呼び出す - これまでのところ、これは完全に正常に動作しています。

問題：

表の上部に、4 buttonsがあるときuser、4 buttonsは、userが順番に再びhtml表に移入AJAXを介して行われているさまざまなデータをロードすることができますbuttonsクリックイベントの1つを押してFindPromo()に再度電話しましたが、td'sをチェックしても、データが正常に読み込まれた後にクラスのクラスがに追加されていないようです私はいくつかのhaを見ることができますクラス.promotion。

は、今私はFindPromo()/GetPromo()内部console.logsを配置した、彼らは、コンソールに書き込むように見える、まだスクリプトがuserが4つのいずれかのボタンを押した後に実行に失敗します。

スクリプト：

// Called on page load and when the user clicks on 1 of the four buttons 
function FindPromo() { 

var checkExist = setInterval(function() { 

var length = $('table.tst-orderProductsTable').find('tbody').children().length; 

if (length > 0) { 

    clearInterval(checkExist); 

    $('tbody').scroll(function() { 
    $('.promotion').filter(checkVisible).addClass('promoSelect'); // Find all promotion td's and assign promoSelect class to them 
    GetPromo(); 
    }).scroll(); 

} 
}, 500); 
} 

function checkVisible() { 
    var elm = this; 
    var eval = eval || "visible"; 
    var vpH = $(window).height(), // Viewport Height 
    st = $(window).scrollTop(), // Scroll Top 
    y = $(elm).offset().top, 
    elementHeight = $(elm).height(); 

    if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight))); 
} 


// Now loop the td's and find all td's that have the class promoSelect. 
// Then retrieve information from that td 
function GetPromo() { 

var product_description = ''; 
var product_position = ''; 

$("td").each(function (i, row) { 

    if ($(this).hasClass('promoSelect')) { 
     console.log("here"); 
    } 

}); 
} 


// clicking 1 of the four buttons above table. 
$('.product-tab-label').click(function() { 

    FindPromo(); 

}); 

FindPromo(); 

Answer 1

要素にイベントをアタッチするとき、あなたは直接的なアプローチまたは委任アプローチを使用することができます。直接的なものは次のとおりです。

$('.product-tab-label').click(function() { 

    FindPromo(); 

}); 

ここでは、各.product-tab-labelに個別に指示があります。新しい.product-tab-labelが作成されると（DOMが変更されたときに起こる）、これらの新しい要素には命令がなく、クリックに応答しません[その後、FindPromo（）; 「実行に失敗します」]。 それぞれの.product-tab-labelはであり、直接的にはです。

指示がDOM変更を超えて生き残るためには、委任されたイベントを使用する必要があります。この場合

$(".product-tab-label-parent").on("click", ,".product-tab-label" ,function() { 
    FindPromo(); 
}); 

、命令は、親要素（.product-タブラベル親）に与えられ、彼らは変化しても、それはその子にイベントをアタッチしています。ここでは、直接および委任イベントに関するセクションがあります

：https://api.jquery.com/on/

あなたが示されたコードで行くが、私はtable.tst-orderProductsTableは、適切な親要素であることを推測します。これを使用してください：

$("table.tst-orderProductsTable").on("click", ,".product-tab-label" ,function() { 
    FindPromo(); 
});