點擊總是第一個阿賈克斯電話

我想在三個步驟中使用一個盒子製作一個頁面，並且每個步驟都需要由ajax加載，每次單擊「下一步」按鈕後步驟都會更改。我改變了每一步的按鈕類，所以我可以加載下一個，不知道是否有更好的方法。但是當我點擊進入第二步時，我會邁出第一步。點擊總是第一個阿賈克斯電話

 /**** THIS WORK FINE *****/ 
    // First Click on Next Button load first step 

    $('.next-button').on('click', function(){ 
     $('.first-step').load('includes/selecione-torcida.html'); 
     $('.next-button').addClass('next-torcida'); 
    }); 

    /**** THIS DON'T WORK *****/ 
    // Second Click on Next Button load second step but in the class "next-torcida" 

    $('.next-torcida').on('click', function(){ 
    $('.first-step').load('includes/selecione-amigos.html'); 
    });

來源

2014-08-28 Cristiano Matos

這是直接事件處理程序的一個示例，它只會應用於存在於DOM創建點的元素。

您需要使用delegated event handler所以它會泡到新添加的元素（或在這種情況下，類，你要指定然後想綁定到一個點擊。

這裏有一個如何做榜樣它與代表團：

// Direct event, is only bound to elements existing at DOM creation point 
$('.next-button').on('click', function(){ 
    $('.first-step').load('includes/selecione-torcida.html'); 
    $('.next-button').addClass('next-torcida'); 
}); 

// Delegated event, will listen for newly created elements too 
$(document).on('click', '.next-torcida', function(){ 
    $('.first-step').load('includes/selecione-amigos.html'); 
});

基本上，你告訴jQuery來監聽上存在整個文檔，其中包括所有新創建的元素過於內的所有.next-torcida元素的點擊次數

直接的方式是，WH。在DOM被加載時，事件處理程序被分別附加到每個具有.next-button類的元素，因此創建的新元素將不具有該處理程序，並且在創建它時必須綁定新的事件處理程序。

注：我只是用document做爲一個例子，這是非常寬泛的，這將是一個好主意，它縮小出於性能的考慮到所有這些因素的共同最近父。

Here's another post解釋直接和委託之間的區別。

來源

2014-08-28 23:05:07

感謝完美的解釋，但這種方式我會點擊按鈕的兩個步驟，並始終進行第一步（下一步按鈕）。謝謝。 – 2014-08-28 23:24:50

一旦你添加了下一個torcida類，你可以刪除下一個按鈕類嗎？我沒有注意到這一點，但將兩個事件處理程序附加到元素上並不是一個好主意 – 2014-08-28 23:27:44

點擊總是第一個阿賈克斯電話

回答

相關問題