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() {...})。函数 live() 用于稍后将元素添加到 dom，并且您希望 jQuery 自动将监听器附加到新元素。出于这个原因，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