在点击事件处理程序中调用自定义jQuery插件会生成错误

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）在事件内部调用插件的两个示例：

<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集合内运行的原因。