Question

我有下表。

<table class="table invoice-items-table">
    <thead>
        <tr>
            <th>Item</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr class="invoice-item-row">
            <td>
                <select class="selectpicker invoice-item-select" title="Select an Item">
                    <option value="1">PHP Development</option>
                </select>
            </td>
            <td class="text-right">
                <input class="form-control invoice-item-quantity" value="1" type="text">
            </td>
            <td class="text-right">
                <input class="form-control invoice-item-price" value="0.00" type="text">
            </td>
            <td class="text-right" style="padding-top:18px!important;">
                <span class="invoice-item-amount">0 </span>
                <span class="invoice-currency">₹</span>
            </td>
        </tr>
        <tr class="invoice-item-add-row">
            <td colspan="7">
                <a href="#" class="link invoice-item-add text-center">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    Add an Item
                </a>
            </td>
        </tr>
    </tbody>
</table>

对于a.invoice-item-add的点击事件，我会在表格中添加更多表格行tr，以下是此代码。

$('.invoice-item-add').on('click', function() {
    var itemRowClone = $('.invoice-item-row').last().clone();
    itemRowClone.find('input, textarea').val('');
    itemRowClone.find('.bootstrap-select').replaceWith(function() { return $('select', this); });
    itemRowClone.find('.selectpicker').selectpicker();
    $('.invoice-item-add-row').before(itemRowClone);
    return false;
});

这很好用，直到我想触发select.invoice-item-select，这就是我触发它的方法。

$(document).on('change', '.invoice-item-select', function() {
    // Code here...
});

我的问题是，这个on-change会根据动态添加的元素数多次触发，如果有一个tr.invoice-item-row它被触发两次，如果有两个tr.invoice-item-row它会被触发四次，基本上是两次点火。

我了解tr.invoice-item-row是动态添加的，我们正在使用$(document).on('change', '.invoice-item-select', function()...来监听触发器。

如何确保此次更改事件仅触发一次？

感谢。

Answer 1

$（document）.on（'change'）事件应在页面加载时调用一次。无需在行添加上添加文档更改。

OR

您可以先取消绑定事件，然后再次绑定

$(document).off('change','.invoice-item-select').on('change', '.invoice-item-select', function() {
    // Code here...
});

Answer 2

你可以尝试这样的替代方式，

$('.invoice-item-select.bootstrap-select').on('changed.bs.select', function(){
// your code
});

将DOM加载到浏览器后，应该应用

bootstrap-select类。

我希望这能解决你的问题。

Answer 3

我最终使用了这个解决方案

$(document).on('change', '.invoice-item-select', function(e) {
    if (e.handled !== true) {
        e.handled = true;
        return;
    }
    // Code here
});

虽然这不会因多次触发事件而停止，但我至少可以停止后续触发器的代码执行。

Answer 4

下面的代码节省了我的时间。您的代码应在'if'函数和元素的'click'事件中运行。这样就可以避免项目重复。

$(document).on('click', '.selectpicker', function(e) {
        if (e.handled !== true) 
        {
            e.handled = true;

            // Your code here

            return;
        }
    });

Javascript - 多次更改事件触发器

4 个答案: