从插件调用驻留在主页中的函数？答案

【问题标题】：Calling a function that resides in the main page from a plugin?从插件调用驻留在主页中的函数？
【发布时间】：2009-06-12 19:39:44
【问题描述】：

我想从插件中调用一个函数，但该函数在主页上而不是插件的 .js 文件中。

编辑

我让 jQuery 解析一个非常大的 XML 文件并随后构建一个大型列表（当动态内容被复制、粘贴、然后保存时为 1.1 MB HTML 文件），该列表通过插件具有展开/折叠功能。假设页面/DOM 如此之大，IE 上的整体性能非常缓慢且难以捉摸。

我目前正在尝试将折叠的内容保存在 event.data 折叠时并将其从 DOM 中删除，然后在被告知展开时将其恢复...我遇到的问题是，当我把内容带回来，显然“点击”和“悬停”事件已经消失了。我正在尝试重新分配它们，目前在插件扩展内容后在插件内部这样做。但是，问题是我在 .click() 中声明的函数没有定义。此外，悬停事件似乎也没有重新分配......

if ($(event.data.trigger).attr('class').indexOf('collapsed') != -1 ) {  //  if expanding
        //  console.log(event.data.targetContent);
            $(event.data.trigger).after(event.data.targetContent);
            $(event.data.target).hide();

/*  This Line --->*/    $(event.data.target + 'a.addButton').click(addResourceToList);

            $(event.data.target + 'li.resource')
                .hover(
                    function() {
                        if (!($(this).attr("disabled"))) {
                            $(this).addClass("over");
                            $(this).find("a").css({'display':'block'});
                        }   

                    },
                    function () {
                        if (!($(this).attr("disabled"))) {
                            $(this).removeClass("over");
                            $(this).children("a").css({'display':'none'});
                        }   
                    }
                );
            $(event.data.target).css({
                                         "height": "0px",
                                         "padding-top": "0px",
                                         "padding-bottom": "0px",
                                         "margin-top": "0px",
                                         "margin-bottom": "0px"});
            $(event.data.target).show();
            $(event.data.target).animate({
                                         height: event.data.heightVal + "px",
                                         paddingTop: event.data.topPaddingVal + "px",
                                         paddingBottom: event.data.bottomPaddingVal + "px",
                                         marginTop: event.data.topMarginVal + "px",
                                         marginBottom: event.data.bottomMarginVal + "px"}, "normal");//, function(){$(this).hide();});
            $(event.data.trigger).removeClass("collapsed");  
            $.cookies.set('jcollapserSub_' + event.data.target, 'expanded', {hoursToLive: 24 * 365});
        } else if ($(event.data.trigger).attr('class').indexOf('collapsed') == -1 ) {  //  if collapsing
            $(event.data.target).animate({
                                         height: "0px",
                                         paddingTop: "0px",
                                         paddingBottom: "0px",
                                         marginTop: "0px",
                                         marginBottom: "0px"}, "normal", function(){$(this).hide();$(this).remove();});
            $(event.data.trigger).addClass("collapsed");  
            $.cookies.set('jcollapserSub_' + event.data.target, 'collapsed', {hoursToLive: 24 * 365});
        }

编辑

因此，拥有新的眼睛确实会有所作为。周末离开后，今天早上在查看这篇文章中的代码时，我发现了哪里出错了。

这个：

$(event.data.target + 'a.addButton').click(addResourceToList);

应该是这个（注意a.addbutton前面的空格）：

$(event.data.target + ' a.addButton').click(addResourceToList);

“li.resource”也有同样的问题。所以它从来没有指向正确的元素......谢谢你，Rene，你的帮助！

【问题讨论】：

您能否发布一些代码示例，说明 addResourceToList 的定义位置和方式？

标签： javascript jquery jquery-plugins function

【解决方案1】：

我猜你应该将你的函数作为一些参数传递给插件，以便它可以调用它。

// inside your plugin:
$.yourPlugin = function(f) {
  f();
}

// on the main page
$.yourPlugin(yourFunction);

其他可能性是通过名称调用全局函数，但插件不应依赖于您自己的全局函数存在。

或者为您的问题提供更多背景信息，因为您当前的描述太简短了。

【讨论】：

【解决方案2】：

在我看来，这个插件应该首先负责添加事件，然后在必要时重新添加它们。

但是当这些点击和悬停事件确实在插件外部时，你可能想看看 jQuery live events。

【讨论】：