Uncaught RangeError: Maximum call stack size exceeded, Chrome JS error

Question

I understand that this is caused by an infinite loop inside my js, but I cannot explain myself why. I want to a row click to trigger the button on the same row. I'm trying the following JQuery, but when I click on a row I end up with in infinite loop inside the row click function. Why is that?

$(document).on('pageinit', function (event) {
    bindRowClick();
});

function bindRowClick() {
    $('.orderTable').find('tr').click(function () {
        var btnView = $(this).find('td.tdViewOrder').find('input[type=submit]:first');
        btnView.trigger("click");
    });
}

I've got a table with class=".orderTable" and a repeater inside the <tbody>

<tbody>
   <asp:Repeater ID="rptrOrderView" runat="server" OnItemDataBound="rptrOrderView_ItemDataBound" OnItemCommand="rptrOrderView_ItemCommand">
      <ItemTemplate>
           <tr class="hand">
              <td class="title">
                  <asp:Label runat="server" ID="lblTdOrderNum"></asp:Label>
              </td>
              <td class="tdViewOrder">
                  <asp:Button runat="server" ID="btnViewOrder" Text="View" CssClass="btnViewOrder" SkinID="btnViewMiniB" CommandName="ViewOrder" />
              </td>
           </tr>
      </ItemTemplate>
   </asp:Repeater>
</tbody>

I know that is very common question, but I still haven't solved my problem.

SOLUTION

I've added event.stopPropagation(); to my click handler and is now working.

$(document).on('pageinit', function (event) {
    bindRowClick();
    $('.btnViewOrder').click(function (event) {
        event.stopPropagation();
    });
});

techfoobar techfoobar · Accepted Answer · 2013-08-15T13:18:40

This is most definitely because btnView.click propagates up and eventually fires the tr's click event - causing the whole thing to go in cycles.

What you need to do is call event.stopPropagation() from the click handler for btnView (which is absent in the question).

Uncaught RangeError: Maximum call stack size exceeded, Chrome JS error

1 Answers