jQuery - function is being called three times

Question

I am trying to call "AcceptSuggestion" from javascript. I simulate a click on the "acceptBtn" and then I want to refresh a table row. It is working... but the "AcceptSuggestion" function is being called three times. Anyone knows why? I aleady tried to unbind the "acceptBtn" before clicking but i got no luck.

Here is the update panel:

<asp:UpdatePanel ID="12" UpdateMode="Conditional" runat="server">
<ContentTemplate>

<div id="123">
<asp:Literal ID="litTable" runat="server"></asp:Literal>
</div>
<button id='acceptBtn' onserverclick="AcceptSuggestion" runat="server" style="display: none" />
<button id='acceptAllBtn' onserverclick="AcceptAllSuggestions" runat="server" style="display: none" />
<asp:HiddenField ID="1" runat="server" Value="" />
<asp:HiddenField ID="2" runat="server" Value="" />
<asp:HiddenField ID="3" runat="server" Value="" />
<asp:HiddenField ID="4" runat="server" Value="" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="acceptBtn" EventName="ServerClick" />
<asp:AsyncPostBackTrigger ControlID="acceptAllBtn" EventName="ServerClick" />
</Triggers>
</asp:UpdatePanel>

And here is the function being called:

Protected Sub AcceptSuggestion()

Dim params As String
params = 1.Value
Dim param() As String = Split(params, "|", , CompareMethod.Text)

update(param)

End Sub

Well, i guess the problem is not the update panel neither the trigger.

Here is my javascript function to call the button, I can't find anyway to put this to work, and I feel like i've tried everything already.

function acceptButton(i) {
                var params = "";
                params += document.getElementById("var1" + i).textContent;
                params += "|";
                params += document.getElementById("var2" + i).textContent;
                params += "|";
                params += document.getElementById("var3" + i).textContent;
                params += "|";
                params += document.getElementById("var4" + i).textContent;
                params += "|";
                params += document.getElementById("var5" + i).textContent;


                var bp = document.getElementById('<%=1.ClientID%>');
                bp.value = params;

                var ri = document.getElementById('<%=2.ClientID%>');
                ri.value = i;

                var Status = document.getElementById('<%=3.ClientID%>');
                Status.value = 1;

                $('#<%=acceptBtn.ClientID%>').off().click();

            }

Answer 1

Yes, I assume that this is because of how Web Forms works :) It fires a different events, you can see the whole page life cycle Here . I think that the solution of your problem is using on your page Load method or in your Init method and use this code on the top of the method.

if(this.IsPostBack)
{
    return;
}