Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   .on('change', function(){}) - Дублируется исполнение функции (https://javascript.ru/forum/events/48710-%27change%27-function-%7B%7D-dubliruetsya-ispolnenie-funkcii.html)

ng-design 14.07.2014 04:47

.on('change', function(){}) - Дублируется исполнение функции
 
Доброго времени суток, уважаемые. Если тему не так выбрал - прошу прощения. Мой первый пост. Особо никогда не спрашивал за 5 лет ничего, но сейчас нужна Ваша помощь.

Я весь код не буду кидать, только тот, что немного "глючит"
$('#NGFormInput_image').on('change', function(){
  alert(1);
});


Каждый раз выполняется на 1 раз больше, т.е. циклом. В первый раз отлично, во второй раз 2 раза вылетает алерт, в третий раз 3 и т.д.

Уточню, что делаю псевдо инпут для загрузки файлов. Перед onchange вызывается триггер клика по инпуту (он скрыт). Всё срабатывает отлично, но каждый раз (без перезагрузки странички) исполняется (после выбора файлика) на 1 раз больше.

Вот как-то так..

P.S. #NGFormInput_image - это и есть скрытый инпут

ng-design 14.07.2014 04:59

Сделал сейчас некий костыль (ибо к спеху), но всё-же буду ждать дельного совета по данной теме.

Кому интересно:

var Executed = false;
$('#NGFormInput_' + PFileName).on('change', function(){
    if (!Executed) {
      alert(1);
      Executed = true;
    }
  });


Думаю ясно, что к чему :-) Тапками не кидайте, зато работает :lol:

WorM32 14.07.2014 09:32

Может просто событие вешается снова после какого-то действия? Полный код в студию.

ng-design 14.07.2014 15:06

$('.ngPseudoFile .button').hover(function(){
      $(this).find('.back').stop().fadeTo(300, 1);
    }, function(){
      $(this).find('.back').stop().fadeTo(500, 0);
    })
      .click(function(){
        var PFile = $(this).parent();
        var PFileName = PFile.attr('data-name');
        var Executed = false;

        $('#NGFormInput_' + PFileName)
          .trigger('click')
          .on('change', function(){
            if (!Executed) {
              var FakePath = $(this).val().split('\\');
              PFile.find('.text').text(FakePath[FakePath.length - 1]);
              Executed = true;
            }
          });
      });


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

feoalter7 14.07.2014 15:14

Почти аналогичный вопрос:
on_event_handler: function(selector){
        document.body.addEventListener('click', function(e){
            //if()
            var RunBtn = document.querySelectorAll(selector);
            for(var i = 0, count = RunBtn.length; i < count; i++){
                if(RunBtn[i].addEventListener){
                    RunBtn[i].addEventListener('click', function(e){
                        alert(1);
                    }, false);
                }
                else if(RunBtn[i].attachEvent){
                    RunBtn[i].attachEvent('onclick', function(e){
                        alert(1);
                    });
                }
            }
        });
    }


Аналог метода .on в JQ, но нужно свой, только почему то окон alert(); каждый раз на одно больше. Как то может чистить очередь событий, пробовал removeEventListener, не помогает..подскажите плиз

WorM32 14.07.2014 15:34

У вас событие вешается по новой после каждого клика по кнопке.

ng-design 14.07.2014 15:39

Хм, а каково может быть решение?

feoalter7 14.07.2014 15:42

WorM32,
в этом то и проблема что не по новой, а новое событие добавляется к старым...тоже думал над тем, чтобы внешнюю переменную завести, так как-то костыльно получается, поэтому обращаюсь за помощью

feoalter7 14.07.2014 15:44

ng-design,
в JQ не уверен что будет правильно, а я для себя на чистом JS думаю создать функцию которая будет добавлять в объект событие, в этом объекте будут лежать все события и функции по событию в виде ассоциативного массива, а вызывать их при необходимости, ту или инную

ng-design 14.07.2014 15:44

:cray: Я думал мне ответили. Эх) Пойду дружить со своим костылём)


Часовой пояс GMT +3, время: 18:30.