Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   jQuery - проблема с .on (https://javascript.ru/forum/dom-window/32947-jquery-problema-s.html)

hjacob 05.11.2012 08:22

jQuery - проблема с .on
 
Погуглив, нашел пример для .on
<script>$("div.test").on({
  click: function(){
    $(this).toggleClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});</script>

Скрипт работает, но вот проблема в следующем, подгружаю контент с помощью ajax и этот скрипт не работает для нового контента. Вообщем, не знаю что делать.:) Подскажете?

Your 05.11.2012 10:38

Сделайте это в функции...
Чтобы функция запускалась.
При нажатии или что там...
Либо:
Подгружать скрипт в том месте где контент.
И библиотеки не забудь подключить.

Иначе не видит, что ему передают и что там такое вообще.

Serg_pnz 05.11.2012 11:12

У on есть особенности, напрямую оно и не будет работать, надо примерно так (div.test - он подгружается динамически):
$(document).on('click', 'div.test', functon(){alert('aaaa')});

devote 05.11.2012 14:18

Цитата:

Сообщение от Serg_pnz
У on есть особенности, напрямую оно и не будет работать, надо примерно так (div.test - он подгружается динамически):

это называется делегированием, событие вешается на документ а не на элемент и при клике по документу проверяется target, если target проходит по правилам div.test событие передается target'у.

hjacob 05.11.2012 20:27

Цитата:

$(document).on('click', 'div.test', functon(){alert('aaaa')});
Но как это сделать сразу для 3 действий, что у меня в первом посте?

hjacob 05.11.2012 20:45

В моем случае это работает только для существующих элементов:
$('#tablelist tr').on({
        mouseenter: function(){
alert(1)
},
        mouseleave: function(){
            alert(2)
        }
    });


Как переписать скрипт, чтобы он работал и для новых элементов?

Serg_pnz 05.11.2012 20:55

Я не парился и писал для каждого события отдельно.
http://api.jquery.com/on/ - вроде нет примера с группировкой

Это не оно .on( events-map [, selector] [, data] ) ?

hjacob 05.11.2012 21:00

Цитата:

http://api.jquery.com/on/ - вроде нет примера с группировкой
Внизу посмотрите, там то же самое, что и у меня в первом посте.

Serg_pnz 05.11.2012 21:13

А про карту событий для кого пишут?
Во, разобрался, и для себя тоже
$(document).ready(function(){ 
      
        $('body').append('<div id="dnew">new</div>')
      
        $(document).on({
        
          click:function(){alert('a1')},
          mouseout:function(){$(this).css('color', 'red')},
          mouseenter:function(){$(this).css('color', 'green')}
          
        }, '#dnew')
        
      });


Пример http://learn.javascript.ru/play/l1qUkb

hjacob 05.11.2012 21:19

Работает, спасибо.


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