Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Двойная инициализация функции (https://javascript.ru/forum/dom-window/39288-dvojjnaya-inicializaciya-funkcii.html)

BK201 24.06.2013 12:49

Двойная инициализация функции
 
Здравствуйте!

Столкнулся с такой проблемой:
есть список итемов
<ul>
   <li>Item-1
<li>Item-2
<li>Item-3
</ul>


На которые вешается событие по клику

$('ul li').bind('click', function(e, data){...}


С помощью JS добавляем в конец еще 1 итем <li>Item-4
$('<li>Item-4')appendTo($('ul'));


И вот проблема в том, что на этот новый итем уже не работает событие, которое повесил на другие.
Если я опять запущу инициализацию события, то Item-4 - работает, но Item 1-3 будут воспринимать по 2 клика.

Скорее всего, я что-то делаю не так. Как нужно цеплять событие на новый итем?

mta88 24.06.2013 13:15

для этого есть метод 'on', простой и гениальный, и новые обработчики не нужны
$('ul').on('click', 'li', function() {})

this внутри функции будет указывать на 'li'

vadim5june 24.06.2013 13:15

уже написали

AfraidAlex 24.06.2013 13:21

Цитата:

Сообщение от BK201 (Сообщение 258123)
Здравствуйте!

Столкнулся с такой проблемой:
есть список итемов
<ul>
   <li>Item-1
<li>Item-2
<li>Item-3
</ul>


На которые вешается событие по клику

$('ul li').bind('click', function(e, data){...}


С помощью JS добавляем в конец еще 1 итем <li>Item-4
$('<li>Item-4')appendTo($('ul'));


И вот проблема в том, что на этот новый итем уже не работает событие, которое повесил на другие.
Если я опять запущу инициализацию события, то Item-4 - работает, но Item 1-3 будут воспринимать по 2 клика.

Скорее всего, я что-то делаю не так. Как нужно цеплять событие на новый итем?

Цитата:

Сообщение от mta88 (Сообщение 258131)
для этого есть метод 'on', простой и гениальный, и новые обработчики не нужны
$('ul').on('click', 'li', function() {})

this внутри функции будет указывать на 'li'

либо задать очередность. Сначала добавлять новый li, потом уже вешать обработчик.

p.s. у вас(автор) ужасный код, советую почитать спецификацию html и js

skrudjmakdak 24.06.2013 13:35

а как же live??
http://jquery-docs.ru/events/live/

mta88 24.06.2013 13:50

Цитата:

Сообщение от skrudjmakdak (Сообщение 258142)
а как же live??

"live" deprecated с 1.7 и удалена в 1.9 :p

vadim5june 24.06.2013 13:50

Цитата:

Сообщение от skrudjmakdak (Сообщение 258142)

As of jQuery 1.7, the .live() method is deprecated

BK201 24.06.2013 14:02

Цитата:

Сообщение от mta88 (Сообщение 258131)
для этого есть метод 'on', простой и гениальный, и новые обработчики не нужны
$('ul').on('click', 'li', function() {})

this внутри функции будет указывать на 'li'

Точно! Спасибо!)))
Цитата:

p.s. у вас(автор) ужасный код, советую почитать спецификацию html и js
читаем. учимся.


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