Перезапуск функции с each

Тема в разделе "JavaScript", создана пользователем Extremosa, 14 окт 2018.

Метки:
  1. Extremosa

    Extremosa Постоялец

    Регистр.:
    11 май 2015
    Сообщения:
    115
    Симпатии:
    150
    Есть функция, которая срабатывает при загрузке страницы для данных элементов.
    Код:
    function open() {
        $('a[data-toggle=\'image\']').each(function(index, element) {
            $('#' + $(element).attr('id') + ' #btn-image-add').on('click', function() {
                console.log('Порядковый номер: ' + index);
            });
        });
    }
    Но затем я вызываю другую функцию, в которой содержатся новые элементы из первой функции.
    Код:
    function image_add() ...
    При нажатии на кнопку #btn-image-add каждый новый элемент повторяются ровно столько раз, сколько этих новых элементов я создал после него. Как исправить эту ошибку?
     
  2. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
    Ничего не понял, даже после пятого прочтения.
    Предлагаю выложить код на jsfiddle.

    Вижу ошибку #btn-image-add
    Идентификатор должен быть только один!

    UPD
    Кажется понял. У вас добавляются новые события ON, одно накладывается на другое?
    Выложите на jsfiddle и покажу как решать.
    Тут надо либо удалять старые евенты ON, что не всегда удобно.
    Либо надо вешать евент на родителя и использовать bubbling, через closest()
    В соседней теме показывал, но фидлы удалены почему-то.
     
    Последнее редактирование: 14 окт 2018
  3. Extremosa

    Extremosa Постоялец

    Регистр.:
    11 май 2015
    Сообщения:
    115
    Симпатии:
    150
    function open открывает изображения по нажатию кнопки #btn-image-add персонально для каждой картинки. Все работает. Но затем функцией function image_add я добавляю новые изображения и нужно перезапустить
    function open чтобы она перебрала новые блоки с изображениями, иначе #btn-image-add не открывает новые изображения.
     
  4. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
    Extremosa нравится это.
  5. Extremosa

    Extremosa Постоялец

    Регистр.:
    11 май 2015
    Сообщения:
    115
    Симпатии:
    150
  6. AirGhost

    AirGhost Писатель

    Регистр.:
    7 дек 2017
    Сообщения:
    3
    Симпатии:
    2
    Добавьте перед присвоением обработчика клика такую строчку:

    $('#' + $(element).attr('id') + ' #btn-image-add').off("click");

    Это разбиндит handler. Вот измененный jsfiddle https://jsfiddle.net/o1b507hp/1/
     
    BaNru и Extremosa нравится это.
  7. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
    Читаем внимательно что выше писал: потому что происходит ПОВТОРНОЕ навешивание события ON, чтобы этого не было надо либо удалять старое событие, либо вешать ОДИН раз на родителя.

    https://jsfiddle.net/BaNru/o1b507hp/2/

    Есть ещё вариант через ONCLICK.
    Наверное это самое простое будет для вас
    https://jsfiddle.net/BaNru/o1b507hp/3/
     
    Extremosa нравится это.