on-click function JavaScript trigger twice

Question

I can't figure out why 'onClick' function trigged twice.

My html code:

  <div class="form-actions right1">
        <button type="button" id="btnCancel" class="btn default">
            Cancel
        </button>
        <button type="submit" id="btnSubmit" class="btn blue">
            Submit
        </button>
    </div>

Script is here:

 $("#btnSubmit").on("click",function () {
            debugger;
            alert("Click");
            CreateOfficeTypeManager.SaveOfficeType();

        });

Possible the script being referenced more than once. Check @ stackoverflow.com/questions/3070400/… — Thirueswaran Rajagopalan
– Thirueswaran Rajagopalan, Commented Mar 12, 2018 at 9:11
Perhaps it is not. If it is in a form and you do not want to submit the form, you need to do this: $("#btnSubmit").on("click",function (e) { e.preventDefault(); which is better done on the form submit event — mplungjan
– mplungjan, Commented Mar 12, 2018 at 9:13
This code only triggers once on my system. I think @ThirueswaranRajagopalan is right. You probably have it referenced 2 times — Nicolo Lüscher
– Nicolo Lüscher, Commented Mar 12, 2018 at 9:14
Maybe by inspecting the $event passed into the callback, you can get more info of what is happening. Debugger is your friend .. — Thirueswaran Rajagopalan
– Thirueswaran Rajagopalan, Commented Mar 12, 2018 at 9:22

jeancallisti · Accepted Answer · 2018-03-12 09:13:35Z

0

You might be binding the "click" even twice.

Put a breakpoint in your $("#btnSubmit")... instruction and see if it goes there twice.

Otherwise, try unbinding as shown here button onclick function firing twice

Finally, if you're in a complex environment, there might be other code handling the clicks for you. Try preventDefault as suggested in the comments of your question.

answered Mar 12, 2018 at 9:13

jeancallisti

1,7941 gold badge23 silver badges35 bronze badges

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

1 Comment

jeancallisti Over a year ago

OK but I hope that you at least checked if your script is executed twice.

Ismail Rubad · Accepted Answer · 2018-03-12 09:21:02Z

0

It works fine.

 $("#btnSubmit").on("click",function () {
            debugger;
            alert("Click");

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-actions right1">
        <button type="button" id="btnCancel" class="btn default">
            Cancel
        </button>
        <button type="submit" id="btnSubmit" class="btn blue">
            Submit
        </button>
    </div>

answered Mar 12, 2018 at 9:21

Ismail Rubad

1,4782 gold badges13 silver badges27 bronze badges

Collectives™ on Stack Overflow

on-click function JavaScript trigger twice

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related