Jquery函數僅適用於頁面加載，在AJAx加載數據後無法運行

-1

我們有以下腳本，當頁面第一次加載時，我們呼叫FindPromo()此功能特別等待HTML Table的子代加載。Jquery函數僅適用於頁面加載，在AJAx加載數據後無法運行

然後，它查找所有td's與類.promotion，並在同一時間檢查，以確保td目前在用戶觀看通過調用checkvisible如果是那麼我們分配額外promoSelect它，我們也把這個當用戶滾動瀏覽表格，如果他們滾動並看到類別爲promotion的td，我們再次將promoSelect分配給它。

我們再調用GetPromo這個循環中的table發現有類promoSelect和檢索td's是從它的值 - 到目前爲止，這工作完全正常。

問題：

在表的頂部，有4 buttons，4 buttons允許user加載它通過AJAX做不同的數據，這又再次填充html表，當user按一個buttons我連線了一個點擊事件再次呼叫FindPromo()，但它似乎並沒有將promoSelect類附加到任何td's具有類.promotion類數據已成功加載後，即使我已檢查td's我可以看到幾個哈等級.promotion。

現在我已經放在console.logs內FindPromo()/GetPromo()他們似乎寫到控制檯，但是腳本失敗後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();

來源

2016-12-17 Code Ratchet

究竟你通過表示「無法運行」？控制檯上是否有錯誤？當你調試時，調用函數時會發生什麼？它具體如何失敗？ – David

@David當我說運行失敗時，在用戶按下四個按鈕之一後，它沒有找到所有類別提升的td。然而，在頁面加載時，它工作得很好。 –

因此，在回調'.scroll（）'選擇器'$（'。promotion'）'時不會返回匹配的元素？這強烈暗示當時頁面上不存在這樣的元素。它們是以某種方式被動態修改或從DOM中卸載/重新加載的？ – David

當安裝事件的元素，你可以使用一個直接的方法或委託的方式。這裏是直接的樣子：

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

    FindPromo(); 

});

在這裏，每個.product-tab標籤已經單獨給出說明。如果新的.product-tab-label被創建[這是DOM更改時發生的情況]，這些新元素沒有任何指令，並且不會響應點擊[和隨後的FindPromo（）;將'不能運行']。每個.product-tab-label是直接負責自己的事件。

由於您希望指令能夠在DOM更改中生存下來，因此您需要使用委派的事件。

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

在這種情況下，指令給父元素（。產品標籤 - 標籤父），當他們改變其附着的事件，它的孩子甚至。

有直接和委託的事件在這裏的一段：https://api.jquery.com/on/

由您所示的代碼去，我想這table.tst-orderProductsTable是一個合適的父元素。使用此：

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

來源

2016-12-17 04:07:23 kakoma

Jquery函數僅適用於頁面加載，在AJAx加載數據後無法運行

回答

相關問題