jQuery委派的函数被激发

jQuery delegated function being fired?

本文关键字：函数 委派 jQuery      更新时间：2023-09-26

我有一些动态生成的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--;
        }
    }

现在我还有一个函数，它监听输入上的更改事件，并执行一些计算，比如…

$('#identifier').on('change', '.quantity-input', updateItemTotal);
function updateItemTotal(event) {
// do stuff
}

现在，如果用户通过键入手动更改输入值，这很好，但如果用户通过changeVal函数更改值，则在输入值更改时不会触发updateItemTotal。当用户调用changeVal(event）函数时，我可以向$('#identifier').on('change', '.quantity-input', updateItemTotal);添加什么事件

提前感谢

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

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();
}

您需要触发事件change的更改以使工作

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

注意：您可以使用$(this)而不是$(event.target)

DEMO

相关文章：