Question

jQuery新手在这里。我有一个页面模板，我使用jQuery .load（）将我的内容加载到选项卡中。问题是，除非我将它们直接放在内容页面中（而不是在外部js文件中），否则功能不起作用。我想出了如何通过改变这样的事情来使点击事件发挥作用：

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

到此：

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

但是如何让函数适用于非点击事件？例如，假设我正在加载＆＃34; contact.html＆＃34;进入我的索引文件，该页面中有一个手风琴。如果我把它放在我的外部js文件中，它就不起作用了：

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

我必须将它直接放在＆＃34; contact.html＆＃34;中，这非常混乱。

所以我的问题是，是否有一种简单的方法可以将这样的函数放在外部文件中，就像点击事件一样？我查看了jQuery＆＃34; on（）＆＃34;事件处理程序文档，但除了单击之外它唯一的例子是提交。

Answer 1

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

E.g。

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

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

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

E.g。

$('#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();
}

jQuery新手：如何在ajax内容中外化非点击功能？

1 个答案: