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

您需要对加载页面后加载的元素使用委托函数

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

.on()

的文档

Answer 2

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 3

您可能希望使用事件委派，这样您就不必担心“实时”，如果您正在寻找要触发的更改事件，您必须像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 4

如果我理解正确，输入字段中的值会更改，但是您有一些事件处理程序附加到未触发的更改事件，这是正确的吗？如果是这样，请将您的代码更改为此操作以手动触发事件：

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

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

4 个答案: