jQuery - после щелчка по родительскому элементу ввода файла и запуска события click для ввода файла возвращается «слишком много рекурсии»

Question

У меня есть это в моем jQuery:

$(document).on('click', '.upload-wrap', function(event)
{
    $('[name="uploads[]"]').trigger('click');
});

, но оно возвращает ошибку "слишком много рекурсии"!однако это не относится к другим моим элементам, таким как:

$(document).on('click', '.upload-image-wrap', function(event)
{
    $(this).next('[name="image"]').trigger('click');

});

Я использовал setTimeout, чтобы исправить это:

$(document).on('click', '.upload-wrap', function(event)
{
    setTimeout(function() {
        $('[name="uploads[]"]').trigger('click');
    }, 0);
});

Но теперь Firefox показывает верхнюю часть страницы, что 'Firefox предотвращалэтот сайт от открытия 99999999 всплывающих окон ', в которых 99999999 увеличивается на миллисекунды.

Как это исправить?

Спасибо

Answer 1

Если .upload-image-wrap имеет атрибут '[name="uploads[]"]', вы можете использовать not(), чтобы исключить '[name="uploads[]"]' из запуска делегированного события:

$(document).on('click', '.upload-wrap:not([name="uploads[]"])', () => {
  $('[name="uploads[]"]').trigger('click');
});

Другой вариант - проверить, было ли событие вызвано человеком:

$(document).on('click', '.upload-wrap', (e) => {
  if (e.originalEvent !== undefined) $('[name="uploads[]"]').trigger('click');
});