Почему при нажатии триггера возникает слишком много рекурсии?

Question

В моем веб-приложении C# есть следующий код:

<div id="divDocument" class="cursor-pointer">
  <i class="icon-document font-size-3em mt10 fileupload-border"></i>
  <asp:FileUpload ID="fileUploadDocument" runat="server" CssClass="d-none" />
</div>

$(document).ready(function () {
  $("#divDocument").click(function () {
    $("#<%= fileUploadDocument.ClientID %>").trigger('click');
  });
});

Но я получаю следующую ошибку на консоли javascript:

InternalError: слишком много рекурсии

Может ли кто-нибудь мне помочь?

С уважением

Answer 1

Ошибка в том, что вы вызываете событие click для дочернего элемента текущего элемента, который обрабатывает событие click, создавая, таким образом, бесконечное значение l oop.

Чтобы это исправить, вам нужно либо удалить внутренний trigger('click'), либо добавить вызов stopPropagation() для этого внутреннего элемента.

Однако стоит отметить, что если Ваша цель - увеличить область попадания при вводе файла, тогда лучший подход - обернуть элемент label вокруг input. Это устранит вашу проблему и избавит от необходимости вводить код JS.

<label>
  <i class="icon-document font-size-3em mt10 fileupload-border"></i>
  <asp:FileUpload ID="fileUploadDocument" runat="server" CssClass="d-none" />
</label>

Answer 2

Это происходит потому, что при щелчке вы запускаете щелчок по дочернему элементу, который, в свою очередь, запускает щелчок по родительскому элементу, который является текущим элементом, который запускает щелчок по дочернему элементу и т. Д.

Вы можете предотвратить это через ярлык, как правильно предположил Рори МакКроссан, и это решило бы проблему в случае щелчка, однако это очень конкретное c решение, и я думаю, что более общее решение, которое бы работать даже в том случае, если наложение ярлыка вокруг элемента было невозможным или если событие не было щелчком мыши.

Вот как можно этого добиться:

$(document).ready(function () {
  $("#divDocument").click(function (event) {
    if ((event.target || event.srcElement).id !== "<%= fileUploadDocument.ClientID %>") $("#<%= fileUploadDocument.ClientID %>").trigger('click');
  });
});