Javascript - Change event trigger multiple times

Question

I have the following table.

<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>

For on-click event of a.invoice-item-add I append more table rows tr to the table, here is the code for that.

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

This works perfectly fine, until I want to trigger select.invoice-item-select, here is how I trigger it.

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

my problem is, this on-change gets fired multiple times based on the number of elements added dynamically, if there is one tr.invoice-item-row it gets fired twice, if there are two tr.invoice-item-row it gets fired four times, basically it fires times two.

I understand that the tr.invoice-item-row are added dynamically and we are using $(document).on('change', '.invoice-item-select', function()... to listen to the trigger.

How do I make sure this on-change event is fired only once?

Thanks.

That’s to be expected. Every time you add something to the DOM, the document is changing. Do you mean only once per row or once per event? — Manngo
– Manngo, Commented Mar 30, 2017 at 9:14

Ibrahim Azhar Armar · Accepted Answer · 2017-03-30 09:44:07Z

7

I ended up using this solution

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

Although this does not stop from multiple firing of events, I can at-least stop the code execution for subsequent triggers.

answered Mar 30, 2017 at 9:44

Ibrahim Azhar Armar

25.8k36 gold badges136 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karan Singh · Accepted Answer · 2017-03-30 09:04:27Z

6

$(document).on('change') event should called once on page load. No need to add document change on row add.

OR

You can first unbind event then bind again like

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

answered Mar 30, 2017 at 9:04

Karan Singh

9061 gold badge6 silver badges12 bronze badges

1 Comment

Ibrahim Azhar Armar Over a year ago

Tried this, it still gets fired multiple times.

Nuwan Withanage · Accepted Answer · 2019-03-21 09:00:11Z

5

Below code save my time. Your code should run inside the 'if' function and element's 'click' event. Then you can avoid the item duplication.

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

            // Your code here

            return;
        }
    });

answered Mar 21, 2019 at 9:00

Nuwan Withanage

4239 silver badges19 bronze badges

Comments

Rahul · Accepted Answer · 2017-03-30 09:14:37Z

1

You can try in alternative way like this,

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

bootstrap-select class should be applied after loading DOM into the browser.

I hope this will solve your problem.

answered Mar 30, 2017 at 9:14

Rahul

18.6k7 gold badges43 silver badges64 bronze badges

2 Comments

Rahul Over a year ago

can you create jsfiddle to workaround the issue you are facing and update the question ?

Rahul Over a year ago

when you will create elements dynamically, bind selectpicker to it also

Collectives™ on Stack Overflow

Javascript - Change event trigger multiple times

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related