jQuery函數不能處理已經加載了Ajax的數據

當用戶點擊一個鏈接時，它會運行$.post來檢索一些數據並顯示它。其中一個鏈接使用每個會話旁邊的按鈕提取會話表。下面是其中一個按鈕的代碼：jQuery函數不能處理已經加載了Ajax的數據

<button class="view_session btn btn-info" id="3f87d50493698d06b9b48abe36cd8fc8">Details</button>

這裏是我的jQuery函數：

$('.view_session').click(function(){ 
    $('#blanket').show(); 
    $('#load').show(); 
    $.post("admin/session.php", { id: $(this).attr('id') }, function(data){ 
     $('#sort').html(data); 
     $('#first').hide(); 
     $('#load').hide(); 
     $('#blanket').hide(); 
    }); 
});

但沒有任何反應。我在Console.log進行測試，沒有任何觸發。有什麼我必須做的，因爲該按鈕最初是在頁面加載後創建的？

來源

2012-12-14 svicino

你把'console.log'測試放在哪裏？ – ianbarker

*有什麼我必須做的，因爲按鈕是在頁面最初加載後創建的？* - 這取決於'click'綁定正在創建的位置，但可能是的。在將按鈕添加到頁面後，您應該綁定到單擊事件，或者使用事件委派。 –

按鈕必須存在才能綁定事件。你可以使用jquery ready函數。或者使用live來代替點擊。 –

如果您正在動態添加按鈕，.click將不會綁定到它，除非它已經在那裏。你要麼需要綁定後的按鈕添加到DOM或使用委託，像這樣：

$(document).on('click', '.view_session', function() {

（更具體的選擇比document將是很好）。

除此之外，作爲$.post函數的第三個參數僅在成功時發生。您可以使用遞延接口的方法來檢查是否存在故障和完成，以及：

$.post(...).then(success).fail(failure).done(complete);

來源

2012-12-14 14:50:57

關於你對現在被刪除的使用'live（）'的其他答案的評論。據我可以告訴OP沒有指定JQuery的版本？對於我所知道的OP來說，使用1.6的'live（）'是很好的。儘管使用'Delegate（）'會更謹慎。 'live（）'完成和使用'on（）'完全相同的代理。然而，在1.7或更高版本中，'live（）'是有說服力的，應該用'on（）' – Nope

@FrançoisWahl替換，當它沒有被指定時，我通常會假設最新的jQuery版本。可能不是最好的假設，但確實1.6和更低沒有'.on'。 '.live'不會*做與'.on'完全相同的事情，因爲對於後者，你可以委託給更具體的選擇器。 –

有什麼我必須這樣做，因爲在創建頁面加載後最初的按鈕？

是的。

原因是處理程序被附加到jQuery對象中當前選定的元素，所以這些元素必須存在於綁定發生的位置。

解決方法是，您必須手動將事件重新綁定到已添加的元素，或使用委派綁定事件。

jQuery的1.7或更高使用on()與委派：

$("#YourclosestStaticElement").on("click", ".view_session", function() { 
    //... same code as before 
}

的jQuery 1.4.3先進/包括1.6使用delegate()：

$("#YourclosestStaticElement").delegate(".view_session", "click", function() { 
    //... same code as before 
}

jQuery的1.3升到/包括1.4.3 live()將是唯一的方法，除了手動重新綁定：

$(".view_session").live("click", function() { 
    //... same code as before 
}

另外，爲什麼live()被貶低，其中有很多原因，它們在觸發事件之前始終冒充文檔，意味着stopPropogation()可能成爲一個問題。

整個列表的原因也在live()文檔中。

要從documentation引用：

$（選擇）.live（事件，數據，處理程序）; // jQuery 1.3+

$（document）.delegate（selector，events，data，handler）; // jQuery 1.4.3+

$（document）.on（events，selector，data，handler）; // jQuery 1.7+

來源

2012-12-14 15:05:56 Nope

jQuery函數不能處理已經加載了Ajax的數據

回答

相關問題