将事件添加到 Jquery 插件答案

【问题标题】：add event to Jquery Plugin将事件添加到 Jquery 插件
【发布时间】：2011-02-09 08:19:55
【问题描述】：

我有一个 JQuery 插件，我想向它添加一些事件。有任何帮助、提示或教程吗？

【问题讨论】：

stackoverflow.com/questions/319264/…
呃，什么插件？如果我们不知道它是关于什么的，我们就无法回答......
@Anriëtte Combrink ：它的一些弹出插件，我想在关闭后做一些事情。 Link

【解决方案1】：

据我所知，如果您有某种关闭弹出窗口的按钮，并且您需要一个在关闭后触发的功能。

(function($) {
  $.fn.somePlugin = function(options) {
    // do some stuff with popup
    $('#closeButton').click(function(e) {
      //close popup
      if (options.onAfterClose !== undefined) {
         options.onAfterClose(e);
      }
    });
  };
})(jQuery);

它只是从点击事件传递事件。

$('#someId').somePlugin({
    onAfterClose: function(e) {
        alert('after close');
    }
});

【讨论】：

我有一个类似的插件结构，除了我将'e'设置为具有某些应该作为参数传递的值，但它总是显示为空。所以没有参数！有什么想法吗？
设法得到排序。它与在 Javascript 中使用 .call 有关，其中传递的第一个参数应该是 'this'，如 onChange.call(this,thenParameters)
正是我所寻找的，并且在理解问题方面做得很好！
还应检查未定义的选项

【解决方案2】：

在您的 jquery 插件中，您要做的第一件事就是在插件代码中的某处触发您的自定义事件：

$("#someElement").trigger("someSpecialEvent");

如果需要，您还可以在触发函数内部传递数据。

$("#someElement").trigger("someSpecialEvent", "this does not need to be a string");

接下来，在插件代码的其他位置为自定义事件创建事件处理程序：

$("#someElement").bind("someSpecialEvent", function(event, data) {
    //If you had passed anything in your trigger function, you can grab it using the second parameter in the callback function.
});

然后您可以允许用户将回调函数作为选项传递，如下所示：

$("#sampleElement").myPlugin({ 
    someEvent: function() {
        //user logic
    }
});

最后，在您的插件代码中，您可以通过几种不同的方式调用用户的函数。一个例子是：

$.fn.samplePlugin = function(options) {
        options = $.extend({}, $.fn.samplePlugin.options, options);
        $("sampleElement").bind("specialEvent", function() {
             options.someEvent.call();
        });
 }

【讨论】：

【解决方案3】：

jQuery docs has everything about triggering an event

使用$.bind() 附加到事件的任何元素都将被通知该事件已被触发并执行其代码。

例子：

$(document).trigger('my.event');

jQuery 支持“命名空间”事件，因此您可以将事件命名为 mypluginName.eventName，以确保没有其他插件干扰您的事件；)

简单而干净，但要小心，文档指出：

虽然 .trigger() 模拟了一个事件激活，完成合成事件对象，它不完美复制一个自然发生的事件。

美好的一天

【讨论】：