javascript - JQuery 函数、包装和实时绑定(bind)

Question

我编写了一个很好的函数来用递增/递减按钮包装输入:

$.fn.qDecInc = function(){
return this.wrap('<span id="qButtons" />').after($('<span/>', { class: 'qIncButton' }).bind('click', function() {
    var ov = 0;
    if (isNaN($(this).val())){
        ov = 0;
    } else {
        ov = $(this).val();
    }
    if (ov < 99){
        var nv = parseFloat(ov) + 1;
        $(this).val(nv);
        $(this).keyup();
        $(this).change();
    }
}), $('<span/>', { class: 'qDecButton', style: 'top: 11px;' }).bind('click', function() {
    var ov = 0;
    if (isNaN($(this).val())){
        ov = 0;
    } else {
        ov = $(this).val();
    }
    if (ov > 0){
        var nv = parseFloat(ov) - 1;
        $(this).val(nv);
        $(this).keyup();
        $(this).change();
    }
}));
}

值会更新，但输入不会更新。 我试过了

$(this).live("change");

甚至

$("body").delegate($(this), "change");

无济于事。 我错过了什么？

http://jsfiddle.net/MVxsA/1/ - 为了您的方便，这里有一个 jsfiddle。

Answer 1

两个问题

1. 在这种情况下，您应该使用 .bind('click', function() {...}) 而不是 live()。或者您可以使用方便的快捷方法 .click(function() {...})。当稍后将元素添加到 dom，并且您希望 jQuery 在那时自动将监听器附加到新元素时，将使用函数 live()。因此，live() 还需要一个选择器(您的示例中省略了该选择器)。

2. 在事件处理程序内部时，this 指的是触发监听器的元素。因此，在本例中，this 是 qIncButton 或 qDecButton，不是应用插件的元素。

以下是解决这些问题的方法:

$.fn.qDecInc = function(){
    var self = this;
    return self.wrap('<span id="qButtons" />').after($('<span/>', { class: 'qIncButton' }).click(function() {
        console.log("up");
        var ov = 0;
        if (isNaN($(self).val())){
            ov = 0;
        } else {
            ov = $(self).val();
        }
        if (ov < 99){
            var nv = parseFloat(ov) + 1;
            $(self).val(nv);
            $(self).keyup();
            $('body').change();
        }
    }), $('<span/>', { class: 'qDecButton', style: 'top: 11px;' }).click(function() {
        console.log("down");
        var ov = 0;
        if (isNaN($(self).val())){
            ov = 0;
        } else {
            ov = $(self).val();
        }
        if (ov > 0){
            var nv = parseFloat(ov) - 1;
            $(self).val(nv);
            $(self).keyup();
            $(self).change();
        }
    }));
}

Your updated jsFiddle is here