Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.06.2022, 13:06
Новичок на форуме
Отправить личное сообщение для leadmagneet Посмотреть профиль Найти все сообщения от leadmagneet
 
Регистрация: 28.06.2022
Сообщений: 1

Почему дублируются события on click в JS?
Доброго дня! Может кто знает, как можно исправить задвоение функции click, при динамическом создании элемента?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Тестовая страница</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>  
    
  </head>
  <body>

   
    
      <script>
         // динамически создаем кнопку 
         $html=' <button class="start">Нажать</div>';
         // создаем в body
         $("body").append($html);
 
         // вешаем обработчик на собития click
         $( "body" ).on( "click", ".start", function() {
      
            $(".main").remove();   // предварительно удаляем главный блок
            $html=' <div class="main"></div>';
            $("body").append($html);  // создаем по новой
      
          
            $html='<button class="start2">Нажать2</button>';  // создаем в главном блоке кнопку

            $html=$html+'<script>'; // создаем событие click  на вторую кнопку 
               $html=$html+' $( "body" ).on( "click", ".start2", function() {';	
               $html=$html+'console.log($(this))';	 // при нажатии на кнопку вывод в консоль
               $html=$html+'});';	
            $html=$html+'<\/script>';

            $(".main").append($html);  // добавляем в главный блок
         });
  
      
      
      </script>
    

  </body>
</html>


Суть такова, создаем кнопку динамически, навешиваем на нее собите on click. При нажатии сначала удаляем блок main, и снова создаем блок main + вложенная кнопка со стилем (start2) + script с событием на кнопку start2 (вывод в консоль). Так вот если, несколько раз понажимать на кнопки, то в консоле будет выводиться сразу несколько событий.

То есть после каждой итерации (удаление и создание вновь элементов), обработчик дублируется. Как сделать что бы не было дублей?
Ответить с цитированием
  #2 (permalink)  
Старый 28.06.2022, 14:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от leadmagneet
как можно исправить задвоение функции click
не назначать клик в клике. строки 30 - 32 перенести в строку 37.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
События - focusout и click отменить повторное срабатывание функции egorychmaster Элементы интерфейса 1 25.06.2015 13:35
События click и dblclick myshara jQuery 1 03.12.2014 17:22
Курсор в JS - События Severtain Общие вопросы Javascript 1 03.12.2011 18:17
Привязка события click в цикле к эелементц craz Events/DOM/Window 8 14.11.2010 12:28
Почему это работает? (инклуд JS в JS) Василий Б. Общие вопросы Javascript 4 11.06.2010 12:41