jQuery移动加/减问题

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");

例如：

$("#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