Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / При добавлении элемента второй раз события на нем теряются. / 9 сообщений из 9, страница 1 из 1
10.07.2013, 03:39
    #38326195
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
При добавлении элемента второй раз события на нем теряются.
Отловил интересное поведение, собственно, оно и должно быть так, но интересно. Если добавить елемент, удалить его и снова добавить - все зарегистрированные события на немпропадают.

Что там происходит и почему вообше это работает без выкидывания ошибки?

Код ниже, и можно запустить его по ссылке http://tinker.io/68263

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>  
  <script>
    var $form  = $("<form></form>")
    var $input = $("<input></input>")
    $input.on('change', function(){
      $('body').append("<p>changed ...</p>")
    })
    $form.append($input)

    // Problem here.
    $form.html('')    
    $form.append($input)

    $('body').append($form)
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
10.07.2013, 04:36
    #38326199
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
При добавлении элемента второй раз события на нем теряются.
Синтаксис без точек с запятыми отдает дилетанством ...
1. Создаем форму, создаем контрол.
2. Контролу назначаем событие.
3. Контрол помещаем в форму.
4. Очищаем форму (странным, правда, образом) - удаляются все содержащиеся элементы, когда доходит до инпута, он тоже в очереди на удаление, но ссылка на глобальную переменную не позволяет GC удалить его, однако позволяет "очистить" его от всевозможных атрибутов и обработчиков событий. По крайней мере, весь jQuery "обвес" будет удален.
5. Инпут помещаем в форму, но уже чистый и состоящий из дефолтного значения, определенного переменной $input. Вероятнее, только DOM-объект, для которого нет места функции .on()

Я думаю, что проверить это можно следующим образом: если после установки инпута в форму навесить на него какой-то объект таким образом - $form.find("input").data("data", "etc") - то после удаления и повторной вставки при попытке вытащить либо через $input.data("data"), либо через $form.find("input").data("data") значение будет undefined.
Вероятнее всего, ыыход - использовать .live()
...
Рейтинг: 0 / 0
10.07.2013, 05:25
    #38326203
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
При добавлении элемента второй раз события на нем теряются.
Спасибо. Такая странная логика потому-что это код из приложения на бакбоне, при изменении модели форма перерисовывается и элементы в нее передобавляются заново.
Я закешировал создание некоторых элементов-инпутов, и получил странный баб с пропадающими событиями. Чтобы выяснить причину потратил часа три наверно.

А синтаксис с точкой-запятой, кстати, отдает карго-культом ... :)
...
Рейтинг: 0 / 0
10.07.2013, 10:08
    #38326345
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
При добавлении элемента второй раз события на нем теряются.
private, в JavaScript есть такое понятие как делегирование. В jQuery есть методы .delegate() и .live(), почитайте документацию по ним и будет Вам щастье.
...
Рейтинг: 0 / 0
10.07.2013, 11:25
    #38326466
jquery2
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
При добавлении элемента второй раз события на нем теряются.
skyANAprivate, в JavaScript есть такое понятие как делегирование. В jQuery есть методы .delegate() и .live(), почитайте документацию по ним и будет Вам щастье. live always obsolete
...
Рейтинг: 0 / 0
10.07.2013, 12:31
    #38326606
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
При добавлении элемента второй раз события на нем теряются.
jquery2skyANAprivate, в JavaScript есть такое понятие как делегирование. В jQuery есть методы .delegate() и .live(), почитайте документацию по ним и будет Вам щастье. live always obsoleteСпасибо, кэп!

Документацию я посоветовал прочитать, чтобы увидеть это:DescriptionAttach an event handler for all elements which match the current selector, now and in the future .и пример делегирования через .on().
...
Рейтинг: 0 / 0
10.07.2013, 13:11
    #38326681
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
При добавлении элемента второй раз события на нем теряются.
Да, но в бакбоне события устанавливаются на вьюшке (тоже с делегированием, но не на документе а на элементе). Соотв. это не я определяю :)
...
Рейтинг: 0 / 0
10.07.2013, 13:21
    #38326696
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
При добавлении элемента второй раз события на нем теряются.
privateДа, но в бакбоне события устанавливаются на вьюшке (тоже с делегированием, но не на документе а на элементе). Соотв. это не я определяю :)Мда...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>  
  <script>
    var $form = $('<form></form>'),
        $input = $('<input></input>');
    
    $form.on('change', 'input', function(){
      $('body').append("<p>changed ...</p>")
    });
    $form.append($input);

    // Where is a problem, bro?
    $form.html('');    
    $form.append($input);

    $('body').append($form);
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
10.07.2013, 17:56
    #38327205
deblogger
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
При добавлении элемента второй раз события на нем теряются.
privateЕсли добавить елемент, удалить его и снова добавить - все зарегистрированные события на немпропадают.

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

Кроме того вы не можете задавать вопросы касательно ява-скрипт пользуясь библиотекой. Вам надо к библиотекарю.

В этом и заключается наша прелесть пользования фреймворками.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / При добавлении элемента второй раз события на нем теряются. / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]