jQuery向事件发送参数

Question

我是一名有用的助手，可以为您翻译文本。

我有一个与插件事件相关的小问题。我的插件正在抛出一个名为“initNewHeight”的事件，并且这个事件正常工作。现在，我想将插件中已更改的值发送到调用此插件的函数......

像这样：

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

但这种方法不起作用。 所以你可以在这里看到： http://jsfiddle.net/Tabes/qRPfm/

- Tabes

Answer 1

尝试更改此内容：

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

到：

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

- Idan Hen

---

请注意，调用函数参数时，第一个是“initNewHeight”回调函数中的“this”，第二个和第三个是您的属性。 - Idan Hen

Answer 2

你的插件存在很多问题，我强烈建议你至少阅读这篇教程。

更新后的Fiddle 请注意，我没有修复下面提到的问题，只是让它按照你的期望工作了

1. 如果您向 trigger 传递多个参数，则需要将它们包装在一个数组中。

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

2. 在 jQuery 对象原型函数（即插件函数）中，this 指向的是 jQuery 对象，而不是 DOM 节点。因此，var $this = $(this); 并不会像你想象的那样工作。此外，如果调用插件的 jQuery 集合封装了多个 DOM 元素，则代码结构会出现问题。

   您的插件函数应该像这样：

   return this.each(function { 
      /*将插件应用于 'this'，它现在是一个 DOM 节点*/ 
   });
   

3. bind 已被弃用，请使用 on。

4. 参数并不会自动出现，我不明白您为什么期望获得任何值，因为您没有传递任何值。

    $this.bind("initEventNewHeight", function(e, el, newHeight) {
        //由于上下文已经是 $this，因此传递 el 是不必要的
        options.initNewHeight.call($this, el, newHeight);
    });
   

5. 您应该考虑将 DOM 元素本身作为事件发射器，并利用 jQuery 事件架构来发布您的事件，而不是像您现在这样依赖回调函数。

       //例如
       var someEvent = $.Event('myCustomEvent');
       someEvent.someParam = 'some value';
   
       $(domElOfYourPlugin).trigger(someEvent);
   

   现在客户端可以像这样注册处理程序 $(domElOfYourPlugin).on('myCustomEvent', ...)

- plalx

---

感谢您的帮助，哦是的，当然，这只是我的插件的一小部分。我需要帮助解决这个问题。谢谢。 - Tabes