JQuery 函数、包装和实时绑定答案

【问题标题】：JQuery function, wrapping and live bindingJQuery 函数、包装和实时绑定
【发布时间】：2011-10-03 04:18:54
【问题描述】：

我写了一个很好的函数来包装一个带有递增/递减按钮的输入：

$.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。

【问题讨论】：

当您提到您尝试过的其他技术时，您的代码示例之后，您的意思是在处理程序内部吗？据我所知，第一个要解决的问题是点击没有被绑定。 jsfiddle.net/MVxsA/3 - 除了老式的 alert() 调试没有弹出之外，我实际上也没有看到值得到更新。
谢谢。我实际上已经使用 .bind() 来绑定事件，但我有一瞬间失去了理智，并在发布之前将其更改回 .live() :)。如小提琴中所见， .bind() 确实有效（并更改了 $(this).val() 值），但不会调用以下更改和 keyup 事件。

标签： javascript jquery bind live

【解决方案1】：

两个问题

在这种情况下，您应该使用.bind('click', function() {...}) 而不是live()。或者您可以使用方便的快捷方式.click(function() {...})。 live() 函数用于稍后将元素添加到 dom 中，并且您希望 jQuery 在那时自动将侦听器附加到新元素。因此，live() 还需要一个选择器（您的示例省略了该选择器）。
在事件处理程序中，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

【讨论】：

谢谢你，$(this) 东西我完全错过了。 :)