jQuery + - 按钮不会像我期望的那样输入值

Question

我有一个ajax模块，可以在客户更改数量或所需的所选属性时更新网站上的价格。只要在输入框中输入值，价格就会更新。 我决定添加一些不错的jQuery按钮来增加值，而不是用户点击框然后输入数量。 问题是我用来创建按钮的脚本不会触发价格变化，即使它确实改变了输入字段中的值。

我的脚本是：

<script language="javascript"> 
jQuery.noConflict(); 
jQuery(document).ready(function() { 
jQuery("#cartAdd").prepend('<div class="dec button">-</div>'); 
jQuery("#cartAdd").append('<div class="inc button">+</div>'); 
jQuery(".button").click(function() { 
var $button = jQuery(this); 
var oldValue = $button.parent().find("input").val(); 

if ($button.text() == "+") { 
var newVal = parseFloat(oldValue) + 1; 
} else { 
if (oldValue >= 1) { 
var newVal = parseFloat(oldValue) - 1; 
} 
} 
$button.parent().find("input").val(newVal); 
}); 
}); 
</script> 

有没有什么办法，使价格更新识别输入字段的新值，我可以让这个功能呢？

Answer 1

您可能需要使用事件委托，所以你不必担心“活”，如果你正在寻找一个改变事件发生，你必须像Tetaxa说的那样手动完成。就像这样：

<script language="javascript"> 
    jQuery.noConflict(); 
    jQuery(document).ready(function() { 
    var $cartAdd = jQuery('#cartAdd') 
     , $quantity = $cartAdd.find('input') 
     , $price = jQuery('#price'); 

    $cartAdd.prepend('<div class="dec button">-</div>'); 
    $cartAdd.append('<div class="inc button">+</div>'); 

    $cartAdd.click(function(evt) { 
     var $incrementor = jQuery(evt.target) 
     , quantity = parseInt($quantity.val(), 10); 

     if($incrementor.hasClass('inc')) { 
     quantity += 1; 
     } else if($incrementor.hasClass('dec')) { 
     quantity += -1; 
     } 

     if(quantity > 0) { 
     $quantity.val(quantity).change(); 
     } 
    }); 

    $quantity.change(updatePrice); 

    function updatePrice() { 
     var price = 15.50 
     , quantity = parseInt($quantity.val(), 10); 
     $price.text(quantity * price); 
    } 
    }); 

</script> 

这是一个jsFiddle与工作代码。

编辑：我添加了一些代码来处理数量输入上的更改事件。

编辑2：我明白了现在的问题。查看源代码后，看起来您只是在文本输入上查找onkeyup，因此触发更改不会产生任何影响。为您解决眼前的问题，我会代替上述：

 if(quantity > 0) { 
     $quantity.val(quantity).change(); 
     } 

，而是把

 if(quantity > 0) { 
     $quantity.val(quantity); 
     xhr.getPrice(); 
     } 

Answer 2

您需要使用委托函数，该函数获取页面加载

jQuery(document).on('click','.button',function(){ 
//Code here 
}); 

的文档.on()

Answer 3

try this 1... 

    jQuery(".button").on('click',(function() { 
    var $button = jQuery(this); 
    var oldValue = $button.parent().find("input").val(); 

    if ($button.text() == "+") { 
    var newVal = parseFloat(oldValue) + 1; 
    } else { 
    if (oldValue >= 1) { 
    var newVal = parseFloat(oldValue) - 1; 
    } 
    } 
    $button.parent().find("input").val(newVal); 
    }); 

Answer 4

如果我理解正确后加载的元素，在输入字段中的值更改，但你有一些事件处理程序附加到未触发的更改事件，这是正确的吗？ 如果是这样，你的代码更改为这个手动触发事件：

$button.parent().find("input").val(newVal).change();