如何在jQuery中创建全局函数，并从另一个加载的页面调用它

Question

如何在jQuery中声明一个全局函数，我该如何使用jQuery的load()函数在某个div中加载页面并调用它。

该函数在第一个子页面中很简单

+-----------------------------------------------+
| 主链接                                         |
+-----------------------------------------------|
| +-------------------------------------------+ |
| |第一个子页面(myfun函数在这里)              | |
| +-------------------------------------------+ |
| | +---------------------------------------+ | |
| | |                                       | | |
| | |                                       | | |
| | |                                       | | |
| | | 点击mybutton调用myfun函数          | | |
| | |                                       | | |
| | +---------------------------------------+ | |
| +-------------------------------------------+ |
+-----------------------------------------------+

但是当我点击时，什么也不发生...... 这是两个函数：

myfun

myfun(tab_index, acc_id){
    alert(tab_index +" | +" acc_id);
}

mybutton

$("#mybutton").click(function(){
    var $bottomLineBtn = $(this);
    $bottomLineBtn.parent().myfun('2','43234');
})

请有人帮我忙...找解决方法太难了..我已经搜索了3个小时...

==================================================================================

更新

以下是详细场景：

1. 我正在使用 jQuery 处理一些动态内容
2. 第一页包含 2 个 div，一个是 id=menu，另一个是 id=subpage1
3. 我从 #menu 点击一个链接，页面将加载到 #subpage1
4. 再次出现一个页面，其中包含两个 div： #menu2 和 #subpage2
5. 在这里，我编写了一个脚本，它通过只获取一个参数（列表菜单的 ID）自动将页面加载到 #subpage2

6. 这个脚本是：

    $("#menu2 li").click(function(){
        $("#subpage2").load($(this).attr('page_link'));
      }
    }).filter('#menu2 li:eq(0)').click();
    

7. 在加载的页面底部，我使用了 2 个按钮，其中一个按钮可以正常工作，它调用上面的函数并更改 li:eq(1) 的值，我是这样做的：

    $("#bottom_bar #backbtn").click(function(){
    var $bottomLineBtn = $(this);
    $bottomLineBtn.parent().parent().parent().find('#menu2 li:eq(1)').click();
    })

但是另一个按钮不起作用。我想调用属于 #subpage1 中某些 div 的函数，但无法访问它们。我在上面的 $("#menu2 li").click(function(){ 函数旁边放置了一个函数。

 myfun(tab_index, acc_id){
        alert(tab_index +" | +" acc_id);
    }

但我不知道如何从加载到#subpage2的第二个按钮调用此函数。

以上情况是否清晰明了？请尽量理解我，我不太善于描述……

- MFarooqi

---

子页面？你是指IFRAME还是什么？ - Orbling

如果您使用load()加载内容，则定义$('#mybutton').click(...)的位置非常重要。当事件绑定时，您的按钮可能尚不存在。 - Endophage

@Orbling 子页面是指使用 jQuery 加载到某个 div 中的页面。 - MFarooqi

那将被称为动态内容，子页面不是HTML/AJAX/JS的标准表达。 - Orbling

Answer 1

为什么不能将函数放在外部的.js文件中，然后将其导入到主页面中？

- slandau

---

@slandau ...好主意..但我不知道..那也不起作用。 - MFarooqi

@MFarooqi：一般来说，JS最好是放在单独的文件中，而不是与HTML页面混合。 - Orbling

@Obling 没问题，我也试着把我的函数放在任何js文件中。但是在使用jQuery时，我的一些函数无法正常工作。我认为这是因为我在每个页面的每个事件上都调用了 "$(document).ready..."，这样做有问题吗？... - MFarooqi

你的函数应该始终正常工作。.ready()和.live()唯一要做的就是让你的函数知道它们应该在什么时候被调用。 - slandau

非常感谢大家，问题只需重新制作脚本就解决了，只需要几行代码，可能是4行或5行... :) 非常感谢。 - MFarooqi

Answer 2

function setGlobalFunc()
{    
   window.myfunc = (function(){alert("o hai");});    
}    

setGlobalFunc();    
myfunc();    

在另一个函数中创建的函数，仍然可以全局访问。

完全不需要 jQuery。

- Chris S.

Answer 3

如果内容是动态加载的，需要使用.live()方法来挂接事件。

$("#mybutton").live("click", function() { /* code here */ });

- peirix

Answer 4

问题在于你将该函数链接起来好像它是jQuery的一部分，但是你没有将它作为jQuery插件。

你应该这样调用它

$("#mybutton").click(function(){
    // var $bottomLineBtn = $(this);
    // $bottomLineBtn.parent();
    myfun('2','43234');
})

或者将您的函数定义为jquery插件，例如：

 $.fn.myfun = function(tab_index, acc_id){
    alert(tab_index +" | +" acc_id);
 };

并像现在一样调用它

- Gabriele Petrioli