CODEWITHSUNDEEP
javascriptjqueryeventsevent-handling
Tabes
Tabes

Reputation: 33

jQuery send parameter to an event

i've a little problem with an event throwing from a plugin. My plugin is throwing an event calling 'initNewHeight' and this is working fine. And now i want to send the changed value in the plugin to the function whitch called this plugin...

like so:

    (function($) {
        $.fn.meAutoSize = function (options, callback){
            var $this = $(this);
            var $options = options || {};

            /* Optionen welche übergeben wurden in eine Variable speichern und mit den Standardwerten verbinden */
            $options = $.extend($.fn.meAutoSize.defaults, options);

            /* Event an den EventHandler binden */
            $this.bind("initEvent", function() { options.init.call(); });

            /* Initialize Event auslösen, neu Inhalte laden */
            $this.trigger("initEvent", $this);

            /* Initialize Event auslösen, neu Inhalte laden */
            $this.bind("initEventNewHeight", function() { options.initNewHeight.call() });

            var newHeight = 12
            $this.trigger("initEventNewHeight", $this, newHeight);
        };

        // Standard-Optionen für das Plugin
        $.fn.meAutoSize.defaults = {
            init: function() {},
            initNewHeight: function(el, newHeight) {}
        }
    })(jQuery);


    $('.autoheight').meAutoSize({
        init: function() {
            $('#Init').html('init function')
        },

        initNewHeight: function(el, newHeight) {
            $('#NewHeight').html('NewHeight:  ' + el +', ' + newHeight)
        }
});

but this way doesn't work.

so you can see it here: http://jsfiddle.net/Tabes/qRPfm/

Upvotes: 3

Views: 235

Answers (2)

plalx
plalx

Reputation: 43718

There are a lot of issues with your plugin and I strongly advise you to read at least this tutorial.

Updated Fiddle Note that I did not fixed the points mentionned below, I just made it work like you expected

  1. If you pass multiple arguments to trigger, you need to wrap them in an array.

    $this.trigger("initEventNewHeight", [$this, newHeight]);

  2. Within a jQuery object prototype function (your plugin function), this points to the jQuery object, not a DOM node. Therefore, var $this = $(this); doesn't do what you think it does. Also, the way your code is structured will cause issues if the jQuery set on which your plugin is called encapsulates multiple DOM elements.

    Your plugin function should look like:

    return this.each(function { 
   /*apply plugin to 'this', which now is a DOM node*/ 
});

  3. bind is deprecated, use on.

  4. Arguments do not fall of the sky, I do not see how you expected to get any value at all since you were not passing any. 

     $this.bind("initEventNewHeight", function(e, el, newHeight) {
     //passing el is not necessary since the context will already be $this
     options.initNewHeight.call($this, el, newHeight);
 });

  5. You should consider using the DOM element itself as an event emitter and leverage the jQuery event architecture to publish your events rather than relying on callbacks functions like you do.

        //E.g. 
    var someEvent = $.Event('myCustomEvent');
    someEvent.someParam = 'some value';

    $(domElOfYourPlugin).trigger(someEvent);

    Now clients can register handlers like $(domElOfYourPlugin).on('myCustomEvent', ...)

Upvotes: 0

Idan Hen
Idan Hen

Reputation: 467

try changing, this:

$this.bind("initEventNewHeight", function() { options.initNewHeight.call() });

to:

$this.bind("initEventNewHeight", function() { options.initNewHeight.call($this, $this, 120) });

Upvotes: 1

Related Questions