如何在動態加載腳本

使用jQuery的（）

<html> 
    <div id="main_content"> 
     <button>click me</button> 
     <script src="main.js" ></script> 
    </div> 
</html>

而main.js：

$('#main_content').on('click', 'button', function() { 
    console.log('you clicked'); 
});

如果我做了充分的頁面加載，然後點擊該按鈕僅註冊一個控制檯消息。但是，如果我隨後通過AJAX請求重新加載main_content's內容，則每個按鈕點擊都會提供2個控制檯消息。它會爲每個後續的AJAX加載提供3,4,5 ...消息，但總是爲整個頁面加載一個消息。

可能有人解釋這種行爲並提出可能的解決方案？

將腳本移動到頭部或身體的底部。 – Bergi

如果你真的需要重新加載該腳本，然後執行此操作：

$('#main_content').off("click").on('click', 'button', function() { 
    console.log('you clicked'); 
});

否則將其放在其他地方明顯。

2012-06-20 21:50:16 Esailija

，謝謝我沒有想過關閉（）。有時候加載這個腳本在我的測試中只是懶惰，但是我通常會把這種類型的代碼放在其他地方。 –

這是因爲您正在加載main.js的多個副本，因此您每次都要附加一個事件處理程序。
每次加載<script>多了一個附加處理程序

<button>click me</button> 
    <script src="main.js" ></script>

這裏的教訓是通過AJAX加載的腳本解析等等，如果你對他們有處理它們所連接

2012-06-20 21:48:45

- @ Nicola，你能解釋一下你最後一句話嗎？全頁面加載腳本不是「解析」？常規頁面加載與AJAX之間處理'

相關問題

回答