jQuery on click event firing multiple times

Question

I just learned how to use the method .on() and I use it to add an event handler to some buttons that are added "live" (after the DOM is ready).

$('#table').on("click", ".delete", function() {
    //whatever
});

This seems to work fine but when I use it in my code I get the click event fired twice. It fires as many times as I have changed the selector, that is, I click a name in the selector and then another and another, let's say 3 times, then when clicking the mentioned button I will get an alert with all those 3 names instead of only the one is selected at that time.

I haven't been able to replicate it in a JsFiddle as the whole thing is quite big. So let me know what else I can add to make the question better.

JS

 $('#dataSelector').change(function() {
   #more code
    $('#table').on("click", ".delete", function() {
        var data_name = $("#dataSelector option:selected").attr('name');
        alert(data_name);
    });
  });

HTML

<div id="selectData">
    <label>Select:</label>
    <br>
    <div class="">

        <select id="dataSelector" class="form-control">

            <option id="default" selected="true" name="default">Pick</option>

            <option value="1" name="somethingA">somethingA</option>

            <option value="2" name="somethingB">somethingB</option>

            <option value="3" name="somethingC">somethingC</option>

        </select>


    </div>
</div>

<div id="goal_table" class="col-md-12">

    <table id="table" class="table table-bordered">
        <tbody>
            <tr>
                <th>Name1</th>
                <th>Name2</th>
                <th>Name3</th>
                <th>name4</th>
                <th></th>
            </tr>
            <tr id="13">
                <td>somethingA</td>
                <td>value</td>
                <td>whatever</td>
                <td>∞</td>
                <td>
                    <button name="13" type="button" class="btn btn-default delete"><i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>

</div>

I can't see any such thing in console. Tried catching and printing your event in console. Check this fiddle of your code:jsfiddle.net/Lrdntz07.. — Aakash Thakur
– Aakash Thakur, Commented Oct 24, 2016 at 11:19
Yes, as I said, I haven't been able to replicate it but the accepted answer works so it's fine. — Didina Deen
– Didina Deen, Commented Oct 24, 2016 at 11:22

Beginner · Accepted Answer · 2016-10-24 11:11:34Z

7

just add off() before on() to remove existing event on it

there's a possibility that you already bind an event in that element so if you want to rebind the event you just off('event') to avoid firing event multiple times

$('#table').off("click").on("click", ".delete", function() {
    var data_name = $("#dataSelector option:selected").attr('name');
    alert(data_name);
});

edited Oct 24, 2016 at 11:11

answered Oct 24, 2016 at 11:07

Beginner

4,1183 gold badges19 silver badges27 bronze badges

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

10 Comments

Didina Deen Over a year ago

As I want to learn, could you explain why? Thanks in advanced.

oshell Over a year ago

Since the event triggers multiple times it is bound more then once. Since we do not have the code to see where this actually happens, it is the easiest suggestion to unbind all click events before binding the new one.

Didina Deen Over a year ago

I edited the question so it can be seen more clearly, but I get it now. I couldn't have figured it out alone. Thanks!

fdomn-m Over a year ago

TBH: The better answer would is to only call .on() once and not multiple times, then you don't need .off(). You use .off() when you're not sure where/how it's being wired up.

Didina Deen Over a year ago

And what would be the point of having those handlers added, I mean, why isn't off before on the default behaviour?

|

Devang Jani · Accepted Answer · 2016-10-24 11:29:12Z

0

I tested your code, for me its working fine. may be in code you give same id for selector and delete button. please check and give unique name to each of your objects.

answered Oct 24, 2016 at 11:29

Devang Jani

11 bronze badge

3 Comments

Devang Jani Over a year ago

or else use... $('.delete').on("click", function() { var data_name = $("#dataSelector option:selected").attr('name'); alert(data_name); });

Didina Deen Over a year ago

some buttons are created dynamically so that method won't work.

Devang Jani Over a year ago

For that you have to user the method that you are currently using. but for me it triggered only once.

Collectives™ on Stack Overflow

jQuery on click event firing multiple times

2 Answers 2

10 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related