Question

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

修改

我让jQuery解析一个非常大的XML文件，然后构建一个大型列表（复制，粘贴，然后保存动态内容时的1.1 MB HTML文件），它通过插件扩展/折叠功能。 IE的整体表现超级慢，狗狗，因为页面/ DOM是如此之大。

我目前正在尝试在崩溃时保存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，感谢您的帮助!!

Answer 1

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

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

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

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

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

Answer 2

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

但是当这些点击和悬停事件真的是插件的外部时，你可能想看一下jQuery live events。

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

2 个答案: