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-event应附加到静态元素。 static元素会将click-event委托给所有子节点，也适用于页面已经加载时创建的子元素。

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

必须将

更改为

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

而不是$（document）任何静态父元素都可以作为事件委托的容器元素。

工作演示：Click event delegation for dynamically added element

有关详细信息，请查看https://api.jquery.com/on/#on-events-selector-data-handler 部分＆＃34;直接和委托事件＆＃34;：

＆＃34;事件处理程序仅绑定到当前选定的元素;在您的代码调用.on（）时，它们必须存在于页面上。＆＃34;

jQuery自定义插件

1 个答案: