jQuery Избегайте нескольких запросов предотвратить

Question

Мне нужен способ предотвратить несколько подчиненных:

$("#myDiv").click(function(e) {
    e.preventDefault();
    console.log('open');

    // submit the form    
    $('#myDiv #myInput').click(function(e){
        e.preventDefault();
        /* ajax call here */
        console.log('clicked');
    });

});

Так что, когда я нажимаю #myDiv отправляет X раз, нажимая на функцию ребенка.

например. Если вы нажимаете 3 раза #myDiv а затем нажмите #myInput Пришлю в 3 раза больше формы, и если вы нажмите снова, отправит 6.

Есть идеи, как это исправить?

Answer 1

Похоже, что вы привязываете обработчик событий, несколько раз для $('#myDiv #myInput')..

Вы должны либо переместить $('#myDiv #myInput').click(function(e){ вне обработчика щелчка $("#myDiv").click(function(e) { или использовать .one(. Анкет Обратите внимание, что в обоих случаях поведение отличается.

Также использование должно использовать event.stoppropagation (); Чтобы остановить пузырьки событий.

Попробуйте ниже код в соответствии с вашим требованием. Приведенные ниже элементы 1. и 2. работает по -разному, поэтому, пожалуйста, поймите код и реализуйте в соответствии с вашим требованием.

1. Перемещение #myinput Click Event Outside

   $("#myDiv").click(function(e) {
   e.preventDefault();
   e.stopPropagation();
   console.log('open');
   });
   
   // submit the form    
   $('#myDiv #myInput').click(function(e){
      e.preventDefault();
      e.stopPropagation();
      /* ajax call here */
      console.log('clicked');
    });
   

2. Обратите внимание, что обработчик щелчка для #myinput будет выполнен один раз.

   $("#myDiv").click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      console.log('open');
   
      // submit the form    
      $('#myDiv #myInput').one(function(e){
       e.preventDefault();
       e.stopPropagation();
       /* ajax call here */
       console.log('clicked');
      });
   });