jQuery Mobile的加/減問題

Question

我打算使用jQuery mobile此一個拿到手機主題http://jsfiddle.net/hhken790/

HTML

<input type="button" value="-" class="qtyminus" /> 
<input type="text" name="myInputs[qty][]" value="0" class="qty" /> 
<input type="button" value="+" class="qtyplus" /> 

jQuery的

$("#dynamic").on("click", ".qtyplus", function (e) { 
    e.preventDefault(); 
    var $input = $(this).prev("input"); 
    var currentVal = parseInt($input.val()); 
    if (!isNaN(currentVal)) { 
     $input.val(currentVal + 1); 
    } else { 
     $input.val(0); 
    } 
}); 

然而，加和減去不會在這裏工作。任何想法是什麼造成這個？

Answer 1

當您添加jQM時，它通過添加容器div和其他DOM元素來增強/樣式許多DOM元素。這意味着您的按鈕和文本輸入不再是DOM中的同胞，prev（）將不起作用。相反向上遍歷DOM，然後向下：

var $input = $(this).closest("div#dynamic").find(".qty"); 

e.g：

$("#dynamic").on("click", ".qtyplus, .qtyminus", function (e) { 
    e.preventDefault(); 
    var $input = $(this).closest("div#dynamic").find(".qty"); 
    var currentVal = parseInt($input.val()); 
    if (!isNaN(currentVal)) { 
     $(this).hasClass("qtyplus") ? $input.val(currentVal + 1) : $input.val(currentVal - 1); 
    } else { 
     $input.val(0); 
    } 
}); 

更新FIDDLE