jQuery新手:我如何将ajax内容中的非单击函数外部化？

Question

这里是jQuery新手。我有一个页面模板，在其中我使用jQuery .load()将内容加载到选项卡中。问题是，除非我将函数直接放在内容页面(而不是外部js文件中)，否则函数无法工作。我想出了如何通过改变这样的事情来使点击事件工作：

$("a.icon-search").click(function () {

对此：

$(document).on('click','a.icon-search',function() {

但是，如何使函数为非单击事件工作呢？例如，假设我正在将"contact.html“加载到我的索引文件中，并且该页面中有一个手风琴。如果我把它放在我的外部js文件中，它就不工作了：

$( ".accordion" ).accordion(); 

我必须把它直接放在"contact.html“中，这是相当混乱的。

因此，我的问题是，是否有一种简单的方法可以将类似于单击事件的函数放入外部文件中？我查看了jQuery "on()“事件处理程序文档，但它除了单击之外的唯一示例是提交。

Answer 1

如果希望将JavaScript放在特定的文件中，并在通过Ajax加载内容之后执行它，则可以使用ajax回调$(<selector>).load(<url>,<callback>)和JQuery的getScript函数的组合。

例如。

$('#content').load(urlToLoad,runJSforAjaxContent);

function runJSforAjaxContent() {
        $.getScript("myAccordion.js");
}

如果希望将所有内容都放在一个JS文件中，那么将定义存储在该文件的每个选项卡中的回调函数中。

例如。

$('#tab1').load(urlToLoad,runJSforTab1Content);
$('#tab2').load(urlToLoad,runJSforTab2Content);

function runJSforTab1Content() {
       // An accordion in tab1 ajax content
      $('.accordion').accordion();
}
function runJSforTab2Content() {
       // A rooltip in tab2 ajax content
      $('.tooltip').tooltip();
}