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

【问题标题】：Calling custom jQuery plugin inside click event handler generates error在单击事件处理程序中调用自定义 jQuery 插件会产生错误
【发布时间】：2014-06-26 21:30:43
【问题描述】：

我一直在为这个问题绞尽脑汁。我编写了一些自定义插件，以前从未遇到过。

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

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

注意：奇怪的问题是，当我在“点击”事件处理程序之外调用插件时，它工作得很好。

插件：

(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');
    */
});

知道为什么吗？

【问题讨论】：

你是说如果你jsFiddle同样的设置，它可以工作吗？
是的，我刚刚用一个新事实更新了我的帖子。看来 load() 函数是导致问题的原因。
因为我刚刚问了我的问题，所以我无法回答，我什么时候可以提供完整的答案，但问题是在 ajax 中加载的页面引用了另一个 jQuery 库，所以它正在覆盖我的插件。

标签： javascript jquery plugins

【解决方案1】：

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

【讨论】：