jQuery通过插件创建的按钮调用函数

Question

我有一个非常简单的jquery插件，它创建一个按钮并将其附加到元素上：

(function($) {
  $.fn.somePlugin = function(element, options) {

    var button = '<button>Hello World</button>';
    $(element).append(button);

    var sayHello = function(){
      alert('Hello World');
    }

  };
})(jQuery);

我的问题是，单击按钮后如何调用sayHello函数？ TIA！

Answer 1

您可以使用$('<button>Hello World</button>')将HTML代码转换为jQuery对象，然后可以像对待其他任何jQuery对象一样攻击click事件：

(function($) {
  $.fn.somePlugin = function(element, options) {

    var button = '<button>Hello World</button>';

    var sayHello = function(){
      alert('Hello World');
    }
    var $button = $(button).click(sayHello);
    $(element).append($button);

  };
})(jQuery);

Answer 2

创建一个jQuery对象，将click事件与该对象绑定，然后将其附加到容器元素。

(function($) {
  $.fn.somePlugin = function(element, options) {
    var sayHello = function() {
      alert('Hello World');
    }

    var button = $('<button>Hello World</button>');
    button.on('click', sayHello);  
    button.appendTo(element);
  };
})(jQuery);

Answer 3

插件代码：

(function ($) {

    $.fn.somePlugin = function (el, options) {

        var $el = $(this);

        $el.append("<button>Hello World</button>");

        $el.on("click", "button", function(){
          alert("Hello World");
        });
    };

})(jQuery);

简单的html：

<div id="target"></div>

插件的用法：

$("#target").somePlugin();

jsfiddle测试