Question

我有一些动态生成的html，我在页面加载时添加到DOM，HTML看起来像这样，并且有很多这样的实例（想想网格）：

<div class="qty">
<input type="text" class="quantity-input" data-price="2.99" 
   data-product="Something" value="2">
<div class="control-wrapper">
<span class="increment"> + </span> 
<span class="decrement"> - </span>
</div>
</div>

现在我有一个函数可以增加或减少脚本中输入的值，如下所示：

$('#identifier').on('click', '.increment', changeVal);
$('#identifier').on('click', '.decrement', changeVal);

function changeVal(event) {
        if(event.target.attributes['class'].value === 'increment') {
            $(event.target).closest('.qty').find('input')[0].value++;
        } else if (event.target.attributes['class'].value === 'decrement') {
            $(event.target).closest('.qty').find('input')[0].value--;
        }
    }

现在我还有一个函数可以监听输入上的change事件并执行一些计算，就像这样......

$('#identifier').on('change', '.quantity-input', updateItemTotal);

function updateItemTotal(event) {

// do stuff

}

现在，如果用户通过键入手动更改输入值，这很好，但是如果输入值发生变化，changeVal函数会updateItemTotal触发，那么它们是否会更改值。当用户使用$('#identifier').on('change', '.quantity-input', updateItemTotal);）函数

时，我可以向changeVal(event添加什么事件

非常感谢提前

Answer 1

您可能希望将计算逻辑移动到单独的函数，并从这两个事件中调用此函数。

Answer 2

function changeVal(event) {
  if(event.target.attributes['class'].value === 'increment') {
    $(event.target).closest('.qty').find('input')[0].value++;
  } 
  else if (event.target.attributes['class'].value === 'decrement') {
     $(event.target).closest('.qty').find('input')[0].value--;
  }

  // can you just put the function call here?
  updateItemTotal();

}

Answer 3

您需要触发事件change的更改才能生效

$(event.target).closest('.qty').find('input').change()[0].value++;

注意：您可以使用$(this)代替$(event.target)

DEMO

jQuery委托函数被触发？

3 个答案: