CODEWITHSUNDEEP
javascriptjqueryplugins
ooomphlaa
ooomphlaa

Reputation: 77

Calling custom jQuery plugin inside click event handler generates error

I've been racking my brain on this issue. I've written a few custom plugins and I've never run into this before.

Here is my scenario. I have written a simple plugin. Then within a click event handler I want to call my plugin. When I do this I get an error that says "Object doesn't support property or method 'plugin name'".

In order to troubleshoot this I removed all other scripts besides jQuery and jQuery UI and my custom plugin. That still did not fix the issue. So thinking maybe I was having a moment I copied the example plugin from the jQuery page 'greenify' and tested using this. Still the same result. Below is an example of what I'm trying to do.

Note: The odd issue is that when I call the plugin outside of the 'click' event handler it works just fine.

Plugin:

(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 ));

Then two examples of calling the plugin 1) outside the event and 2) inside the event:

<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>

What is really annoying is that when I jsFiddle it the plugin works. What I'm looking for is suggestions on why this could be happening. I'll try anything. Thanks!

UPDATE:

After racking my brain some more I found what my issue was but I'm not sure 100% how to solve it.

In another $(function(){}); I call $().load() to load an ajax page. If I remove it then everything works great.

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

Any idea why?

Upvotes: 0

Views: 368

Answers (1)

ooomphlaa
ooomphlaa

Reputation: 77

I was able to find the root cause. I was pulling in an page through ajax (written by someone else) that had a call to another jQuery instance. Since this call was after my include of the plugin and before the call to my code it was overwriting the jQuery instance. Which I'm guessing is why it ran during document ready but not inside a jQuery collection.

Upvotes: 1

Related Questions