在內容加載時使用jQuery.on（）與加載腳本

Question

加載模態框或燈箱內的內容時，最好是通過使用jQuery.on()來掛接所需的事件和腳本，或者將它加載到內容中通過腳本標籤？

例如，與.on()解決方案：

$('#blah').on('load', function() { 
    $('#something').click(function() { alert('Hi'); }); 
}); 

，然後裝模態對話框時，它會調用$('#blah').trigger('load')

或者只是簡單的已在腳本加載與HTML作爲在：

<div id="blah"> 
    <a href="#" id="something">Something</a> 
</div> 
<script src="/js/blah.js"></script> 

包含上面的JavaScript代碼blah.js涉及#something設置點擊事件。我已經使用了.on()方法一段時間，但我不確定這是否是處理此問題的最佳方法。

Answer 1

參數爲腳本包含解決方案

的on解決方案是醜陋和參與。它需要比簡單的腳本包含更多的代碼，並將負載處理代碼（大概是其他地方）和燈箱內容之間的關注混淆起來。爲什麼該代碼知道燈箱內的元素的ID？

參數爲on解決

它涉及到一個更小的HTTP請求，因此可能會更快。

Answer 2

的方式.on()的設計，你會成立事件處理程序首先是這樣的：

$("#blah").on('click', "#something", function() { alert('Hi'); }); 

然後，當你加載#blah內容，你的事件處理程序將自動爲#something元素工作，你不需要​​處理程序。

這個工作方式是jQuery在#blah上設置事件處理程序。該事件處理程序檢查任何觸發它的點擊事件，並且當它看到一個目標位於匹配選擇器#something的對象上時，它會觸發該事件。 #something可以隨心所欲地進出，因爲實際的事件處理程序位於整個時間存在的父對象上。

使用此方法，您不需要額外的blah.js文件。