JQuery的功能，包裝和現場結合

我寫了一個很好的功能，包裝與遞增/遞減按鈕的輸入：JQuery的功能，包裝和現場結合

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

來源

2011-10-03 khvn

代碼樣本後，當你提到你已經嘗試了其他技術，你的意思是處理程序中？據我所知，要解決的第一個問題是點擊沒有被綁定。 http://jsfiddle.net/MVxsA/3/ - 除了舊式警報（）調試不彈出，我實際上並沒有看到值得到更新。 –

謝謝。實際上，我使用.bind（）來綁定事件，但在一秒之內就失去了我的想法，並在發佈之前將其更改回.live（）。正如在小提琴中看到的，.bind（）確實有效（並且改變了$（this）.val（）值），但是下面的改變和keyup事件不會被調用。 – khvn

兩個問題

在這種情況下，你應該使用.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

來源

2011-10-03 04:48:57 Lee

謝謝你，$（this）thingie完全被我遺漏了。 :) – khvn

JQuery的功能，包裝和現場結合

回答

相關問題