如何針對jQuery的負載功能阿賈克斯已加載元素

我加載某些HTML內容是這樣的：如何針對jQuery的負載功能阿賈克斯已加載元素

$('#scores').load('scores.php #scores');

請注意，這是我的目標scores.php的特定部分的要求（因爲有。周圍是我努力的目標區域其他文本

但是負載函數生成的HTML無法指定使用jQuery

例如，如果#scores HTML是這樣的：

<div class="score">2335</div>

jQuery的事件監聽器不皮卡在此：

$('.score').click(function(event){ 
    /* This doesn't work */ 
    alert('this alert never fires if the click event listener is an ajax generated item.'); 
});

來源

2012-03-27 Talon

在數據加載到頁面後，您可能不會重新激活.click事件。我自己有這個問題。

我提出的兩種解決方案是使用ajax上的成功回調來重新激活click事件（確保它在加載後始終處於活動狀態）或使用.on（「click」，函數（）），因爲它會一直存在。

編輯：改變活到。習慣的力量。

來源

2012-03-27 17:54:04

.live（）爲我工作。我認爲它是下面提到的.on方法的更新版本，請參閱：http://api.jquery.com/live/ – Talon 2012-03-27 17:55:31

實際上，'.live'現在被折舊了。 '.on'是替代品。 – 2012-03-27 17:56:55

@Talon。是的'活''不應該使用，因爲* jQuery 1.4.4 *我們在** 1.7.1 **這一天... – gdoron 2012-03-27 18:01:59

使用委託的事件。對於新的jQuery版本（1.7+），如on。

$('#containerId').on('click','.score', function(event){ 
    /* This DOES work NOW*/ 
});

containerId應是最接近靜態元件（當DOM就緒存在。），它保存.score元件。

如果您使用jQuery的舊版本選擇合適的功能：

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+

ondocs關於委託事件：

事件處理程序只能綁定到當前選擇的元素;在代碼調用.on（）時，頁面上必須存在。要確保元素存在並且可以選擇，請在頁面上的HTML標記中的 HTML標記中對元素執行文檔就緒處理程序內的事件綁定。如果新頁面被注入頁面，選擇元素並附加事件處理程序，當新的HTML被放置到頁面中時，頁面中的內容爲。或者，使用委託事件來附加處理程序事件，如下所述。

委託事件的優點是它們可以處理來自後來添加到文檔中的事件的事件。通過挑選一個在連接了委託事件處理程序時保證存在的元素，可以將委派事件用於，從而避免需要經常附加和刪除事件處理程序。例如，這個元素可能是模型 - 視圖 - 控制器設計中的視圖的容器元素，或者處理程序想要監視文檔中的所有冒泡事件的文檔。文檔元素在加載任何其他HTML之前在文檔的頭部中可用，因此在沒有等待文檔準備就緒的情況下附加事件是安全的。

來源

2012-03-27 17:53:18 gdoron

你確定「選擇器」是強制性的嗎？根據文件是可選的。可能有所不同，但我錯過了將它作爲參數傳遞給「on」 – 2012-03-27 18:04:55

@ClaudioRedi的要點。是，我確定。 _「如果選擇器被忽略或爲null，則事件處理程序被稱爲直接或直接綁定。每次在選定元素上發生事件時，都會調用該處理程序，無論它是直接發生在元素還是來自子孫的氣泡內部）元素。「_ – gdoron 2012-03-27 18:06:54

感謝您的澄清 – 2012-03-27 18:21:30

如何針對jQuery的負載功能阿賈克斯已加載元素

回答

相關問題