В чем рекурсивная ошибка javascript

116

09 июля 2019, 15:30

Пытаюсь добиться, чтобы при нажатии на область psewdophoto нажимался input , который внутри него, но браузер выдает ошибку в консоли(вроде, как я понимаю, зацикливание):

Uncaught RangeError: Maximum call stack size exceeded

HTML

<ul>
    <li class="psewdophoto">
        <input type="file" class="post_photo">
    </li>
    <li class="psewdophoto">
        <input type="file" class="post_photo">
    </li>
    <li class="psewdophoto">
        <input type="file" class="post_photo">
    </li>
    <li class="psewdophoto">
        <input type="file" class="post_photo">
    </li>
    <li class="psewdophoto">
        <input type="file" class="post_photo">
    </li>
</ul>

Javascript

$('.psewdophoto').click(function(event){
        $(this).children('.post_photo').click();
        event.preventDefault();
});

Answer 1

Проблема во всплытии события click. Вызывая click у дочернего элемента в обработчике клика родителя, при всплытии ты опять попадаешь в обработчик родительского элемента и все по новой.

Если вывести event.target можно заметить, что всегда выводится input.

var i = 0; 
$('.psewdophoto').click(function(event) { 
  if (i++ < 5) { 
    $(this).children('.post_photo').click(); 
    console.log(event.target); 
  } 
  event.preventDefault(); 
});

li { 
  border: solid 1px green; 
} 
 
input { 
  border: solid 1px red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
</ul>

Для решения можно добавить обработчик для input в котором запретить всплытие с помощью .stopPropagation()

$('.psewdophoto').click(function(event) { 
  $(this).children('.post_photo').click(); 
  event.preventDefault(); 
}); 
 
$('input').click(function(e) { 
  e.stopPropagation(); 
});

li { 
  border: solid 1px green; 
} 
 
input { 
  border: solid 1px red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
  <li class="psewdophoto"> 
    <input type="file" class="post_photo"> 
  </li> 
</ul>

Answer 2

При клике на элементе также срабатывает событие и на родителе, об этом следует не забывать.

$('.psewdophoto').click(function(event){ 
    $(this).children('.post_photo').click((function(e) { 
      e.stopImmediatePropagation(); 
    }) 
 ); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
    <li class="psewdophoto"> 
        <input type="file" class="post_photo"> 
    </li> 
    <li class="psewdophoto"> 
        <input type="file" class="post_photo"> 
    </li> 
    <li class="psewdophoto"> 
        <input type="file" class="post_photo"> 
    </li> 
    <li class="psewdophoto"> 
        <input type="file" class="post_photo"> 
    </li> 
    <li class="psewdophoto"> 
        <input type="file" class="post_photo"> 
    </li> 
 </ul>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проверить наличие трех заглавных букв в строке

Объясните мне, почему этот код не работает и как это исправить:

128

javascript

Вывод json на страницу

Получаю json такого вида:

124

javascript

Маска для динамических полей input

Есть блок, который создает 5 input элементов при нажатии на кнопку, в этих input элементах у меня должна быть маска для вводаИспользую jquery mask Но, у меня...

118

javascript

Как получить координаты маркера в OSM картах

Есть передвижной маркер Google и при перемещении могу записать новые координаты в файл для этого использую следующий код JS

110