Event Called twice on button click in jquery

Question

I have a Submit button on click of which i am calling the click function inside javascript first.

var id = $('input[id$=chkSubcontracting]').attr("id");
var indexserverIdPrefix = id.indexOf("chkSubcontracting");
var serverId= id.substring(0,indexserverIdPrefix);
$('#'+ serverId +'historyControl_historySubmitButton').click(function() {

//other part of code
//if error is there then add the error message to message

 if (message != "") {    
        $('#'+ serverId +'ErrorMessagePanelHiddenField').val("1");
        $(this.ErrorMessagePanelHiddenField).val("1");
        $("[id*='ErrorMessagePanelHiddenField']").val("1");
        this.IsValid = 1;
          alert(message);
         } 
else
 { 
         $("[id*='ErrorMessagePanelHiddenField']").val("0");
}

My Aspx Page code is here

<asp:Panel ID="ErrorMessagePanel" CssClass="ErrorPanel" Visible="true" runat="server">
                    <asp:HiddenField ID="ErrorMessagePanelHiddenField" runat="server" />
                    <div class="ErrorDiv" id="ErrorMessageDiv">
                        <asp:BulletedList CssClass="ErrorMessage" ID="ErrorMessageBulletedList" runat="server">
                        </asp:BulletedList>
                    </div>
                </asp:Panel>

Sometimes on button click this event is fired twice. Also I am able set 'ErrorMessagePanelHiddenField' value first time. but not at subsequent time.

is it always twice or if your alert count is increasing every time you click your submit button ? — Arkantos, Feb 27 '15 at 14:07
@arkantos Its not always. However i am not able to set hiddenfield on second time. — Manoj Nayak, Feb 27 '15 at 14:25

score 2 · Answer 1 · edited May 23 '17 at 11:51

If you call jQuery .click() on an element more than once, the event handler will be attached multiple times. Ensure that the script you posted where the click event handler is attached is not being executed more than once in your page. See click() event is calling twice in jquery

Another approach is to use jQuery's .off() and .on() methods, as explained in Using Jquery off().on() or just on(). Essentially, the .off() method will remove any attached event handlers, so you can be sure that when you call .on() to attach your click handler, it will be the only one attached.

Event Called twice on button click in jquery

1 Answers1