jQuery自定义插件

Question

我试着写我的第一个jQuery插件，我坚持=)

插件的想法很简单：

对表单上的任何输入进行初始化，将按钮添加到表单中。如果输入有值，则显示红色按钮，如果输入为空，则不显示按钮。但如果按下某些键-绿色按钮将出现在输入附近。

好的。按钮出现了！但是怎么做，让他们用我的插件来点击呢？

在这里，代码：

(function($) {
    jQuery.fn.buttonokdel = function(options) {
        var settings = {
            btnDel: null,
            btnOk: null
        };
        var settings = $.extend( {}, settings, options );
        var controlbuttonfunc = function() {
            $(settings.btnOk).on("click", function(){
                alert ($(this).html());
            });
        var $this = $(this);
        if ($this.val()) {
            $this.after(
                    '<span class="input-group-btn"> \n\
                     <button class="btn btn-danger btno" type="button">\n\
                        &nbsp<span class="glyphicon glyphicon-remove-sign"></span>\n\
                     </button> \n\
                     </span>'
                    );
        } 
        $(this).keyup(function(e) {
            if ($this.next().has("span").length > 0) {
                return false;
            }
            $this.after(
                    '<span class="input-group-btn"> \n\
                      <button class="btn btn-success btyes" type="button")>\n\
                        &nbsp<span class="glyphicon glyphicon-ok-sign"></span>\n\
                     </button> \n\
                     </span>'
                    );
            return true;
        });
    };
    return this.each(controlbuttonfunc);
};
}(jQuery));

$(document).ready(function() {
    $(".inputa").buttonokdel({btnOk:".btyes", btnOk:".btyes"});
});

似乎我不理解jquery元素初始化的某些内容。请帮我找出我做错了什么。谢谢!

Answer 1

不确定这是否解决了您的问题，但我将尝试一下:在动态创建按钮时，应该将jQuery on事件附加到静态元素。静态元素将将单击事件委托给所有子元素，也用于在页面已加载时创建的子元素。

var controlbuttonfunc = function() {
        $(settings.btnOk).on("click", function(){ ...

必须被转变成

var controlbuttonfunc = function() {
        $(document).on("click", ".btn", function(){ ...

任何静态父元素都可以用作事件委托的容器元素，而不是$(document)。

工作演示：单击动态添加元素的事件委托。

有关更多信息，请参阅https://api.jquery.com/on/#on-events-selector-data-handler部分“直接和委托的事件”：

“事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on()时存在于页面上。”