1

我有一个 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>

有什么方法可以让价格更新器识别输入字段中的新值？

4

4 回答 4

2

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

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

.on()的文档

于 2013-03-01T13:15:51.440 回答
1 
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);
    });
于 2013-03-01T13:15:57.103 回答
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();
      }
于 2013-03-01T13:46:07.097 回答
0

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

$button.parent().find("input").val(newVal).change();
于 2013-03-01T13:25:22.320 回答