内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用
这个问题在这里已有答案:
当我选择"Keyboard layout"
它使用js生成按钮 - 但点击事件不适用于动态生成的按钮。我想,这是因为当文件准备就绪时,元素“ .prices-tier
”不存在。它只在我选择布局时生成。
我的部分代码:
require(['jquery'], function(){
jQuery(document).ready(function(){
const currencySymbol = jQuery('.price').text()[0];
var standartPrice = Number(jQuery('.price-wrapper').attr('data-price-amount'));
jQuery('.prices-tier').on('click','.btn', function () {
var quantity = Number(jQuery(this).attr("data-qty"));
var price = jQuery(this).attr("data-amount");
jQuery('.qty-default').val(quantity);
jQuery('#product-price-'+"<?php echo $_product->getId();?>"+' .price').html(currencySymbol+price);
// jQuery('.product-info-main>div>.price-box>.price-container>.price-wrapper>.price').html(currencySymbol+price);
jQuery('.qty-default').trigger('input');
}
);
生成的html元素:
<div class="prices-tier items w-75 btn-group">
<button type="button" class="btn btn-light border border-bottom-0 border-top-0 bg-primary" data-qty="25" data-amount="27.21" onclick="">
4%</button>
<button type="button" class="btn btn-light border border-bottom-0 border-top-0 bg-primary" data-qty="50" data-amount="26.5" onclick="">
6%</button>
</div>
您需要使用事件委派并将侦听器附加到父(已存在于DOM中)或document
。这样,事件可以从新元素中冒出来并被侦听器捕获。
jQuery(document).on('click', '.prices-tier .btn', function () {
注意,这不仅仅是一个jQuery技巧,这就是JS事件的工作方式。例如,它在您拥有(例如)项目列表(1000)但您不想为每个项目添加事件侦听器的情况下也很有用。您可以将一个事件侦听器附加到父容器(<ul>
也许是一个),并且可以捕获从其子级冒出的所有事件并处理它们。