jQuery - проблема с .on

[hjacob]

Погуглив, нашел пример для .on

<script>$("div.test").on({
  click: function(){
    $(this).toggleClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});</script>

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

[Your]

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

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

[Serg_pnz]

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

$(document).on('click', 'div.test', functon(){alert('aaaa')});

[devote]

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

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

[hjacob]

$(document).on('click', 'div.test', functon(){alert('aaaa')});

Но как это сделать сразу для 3 действий, что у меня в первом посте?

[hjacob]

В моем случае это работает только для существующих элементов:

$('#tablelist tr').on({
        mouseenter: function(){
alert(1)
},
        mouseleave: function(){
            alert(2)
        }
    });

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

[Serg_pnz]

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

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

[hjacob]

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

Внизу посмотрите, там то же самое, что и у меня в первом посте.

[Serg_pnz]

А про карту событий для кого пишут?
Во, разобрался, и для себя тоже

$(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]

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