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

您可以將您的HTML代碼插入到使用$('<button>Hello World</button>')一個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對象，綁定點擊事件並將其附加到容器元素。

(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 TES t