Question

我一直在讨论这个问题。我写了一些自定义插件，我以前从未遇到过这个问题。

这是我的情景。我写了一个简单的插件。然后在点击事件处理程序中我想调用我的插件。当我这样做时，我收到一条错误，上面写着“对象不支持属性或方法'插件名称'”。

为了解决这个问题，除了jQuery和jQuery UI以及我的自定义插件之外，我删除了所有其他脚本。这仍然没有解决问题。所以想想也许我有一刻我从jQuery页面'greenify'复制了示例插件并使用它进行了测试。结果仍然相同。以下是我正在尝试做的一个例子。

注意：奇怪的问题是，当我在'click'事件处理程序之外调用插件时，它可以正常工作。

插件：

(function ($){
    $.fn.greenify = function(options){
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "black"
        }, options );
       // Greenify the collection based on the settings variable.
       return this.css({
        color: settings.color,
        backgroundColor: settings.backgroundColor
    });
};
}( jQuery ));

然后在事件之外调用插件1）的两个例子和2）事件内部：

<script type="text/javascript" src="mypluginloaction.js"></script>
<script type="text/javascript">
  $(function(){

    //This works!
$('a').greenify();


$('.post-box-left').on('click', function(){
            //This does not work
    $('a').greenify();
    $('#blurBackground').show();
    $('#popupWindow').show();
});
</script>

真正令人讨厌的是，当我jsFiddle它插件工作。我正在寻找的是为什么会发生这种情况的建议。我会尝试任何事情。谢谢！

更新

在我的脑子里挣扎了一些后，我发现了我的问题，但我不确定100％如何解决它。

在另一个$（function（）{}）中;我调用$（）。load（）来加载ajax页面。如果我删除它，那么一切都很好。

$(function(){
    /* Removing this makes it work!
        $('#Poll').load('AJAX/Poll.asp');
    */
});

知道为什么吗？

Answer 1

我找到了根本原因。我通过ajax（由其他人编写）拉入一个页面，该页面调用了另一个jQuery实例。由于此调用是在我的插件包含之后，在调用我的代码之前，它覆盖了jQuery实例。我猜测它是为什么它在文档准备期间运行但不在jQuery集合中运行。

在click事件处理程序中调用自定义jQuery插件会产生错误

1 个答案: