Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Функия не работает на вновь добавившиеся элементы

Автор: Serious2008 17.5.2013, 15:59

Здравствуйте, у меня есть вот такая простая функция

Код


  $(function(){
    $('.img2').hover(function(evt){
     if (evt.ctrlKey)
     {$(this).children('img').stop().animate({width:"300px",height:"300px"}, 400);}
    }, function(){ $(this).children('img').stop().animate({width:"50px",height:"50px"}, 400); });
  });

ну и например вот такие картинки

Код


<td class="count_230">
<div class="st2">
<div class="img2">
<img src="http://tbo_GWgQG1tiwsxjql1gTRFsvCYhsWK2_MNkZQT57Xg" id="img_230_2"
 style="position:absolute; width:50px;height:50px;" class="img-polaroid" width="50" height="50" onclick="img_select('230_2');">
</div>
</div>
</td>

Когда они грузятся сразу же с документом то скрипт всё нормально срабатывает, когда я через аякс добавляю ещё несколько картинок в этом же формате.

Код


<td class="count_230">
<div class="st2">
<div class="img2">
<img src="http://tGcTIqgcaBiEg3LL1I0JZ1-YV5RZukFDjOssy9OkWBXuEro9zIAjuqCRrHFg" id="img_230_10" 
style="position:absolute; width:50px;height:50px;" class="img-polaroid" width="50" height="50" onclick="img_select('230_10');">
</div>
</div>
</td>

То уже при наведении на новые скрипт не срабатывает, а на старые срабатывает.
Подскажите пожалуйста в какую сторону копать чтобы тоже работал?

Автор: Arantir 17.5.2013, 16:33

Как вы представляете себе работу этой функции?

Код


  $(function(){
    $('.img2').hover(function(evt){
     if (evt.ctrlKey)
     {$(this).children('img').stop().animate({width:"300px",height:"300px"}, 400);}
    }, function(){ $(this).children('img').stop().animate({width:"50px",height:"50px"}, 400); });
  });

В программировании нет "магии". Все куда прозаичнее.

$('.img2') возвращает массив элементов с классом "img2", это понятно. Функция hover устанавливает каждому из этих элементов указанную функцию (которая вызывается при наведении).
Следовательно, указанная функция сработает только для тех элементов, которые вернула $('.img2'), иными словами, только для тех элементов, которые присутствовали на странице в момент вызова приведенной вами функции.

Автор: Serious2008 17.5.2013, 16:37

Вот чтобы обмануть это дело, я сделал функцию update, которая как я думал обновит это дело я её вызываю уже после получения новых элементов.

Код


function update()
{
 $('.img2').hover(function(evt){
     if (evt.ctrlKey)
     {$(this).children('img').stop().animate({width:"300px",height:"300px"}, 400);}
    }, function(){ $(this).children('img').stop().animate({width:"50px",height:"50px"}, 400); });
}

Которая как я надеялся обновит это дело, но оно не помогло. По этому очевидный вопрос как это можно ещё раз обновить? Или тут уже только обновление страницы?

Автор: Sanchezzz 17.5.2013, 16:41

Можно не на добавленные сделать события потом вставить в общий документ либо переопределить заново выполнив ваш код после вставки данных яксом.

или повесить события через live или если 1.7 версия+ то через on

Добавлено @ 16:44
Сделайте демку на jsfiddle.net или полный код, с версткой категорически нет желания лепить таблицу=)

Автор: Serious2008 17.5.2013, 16:46

Цитата(Sanchezzz @ 17.5.2013, 16:41

)

либо переопределить заново выполнив ваш код после вставки данных яксом.

Я выше написал как я сделал переопределение, но что-то не помогло.

Цитата(Sanchezzz @ 17.5.2013, 16:41

)

или если 1.7 версия+ то через on

Версия 1.8.1 не подскажите как преобразовать это всё что у меня в on?

Добавлено через 3 минуты и 37 секунд

Цитата(Sanchezzz @ 17.5.2013, 16:41

)

Сделайте демку на jsfiddle.net или полный код, с версткой категорически нет желания лепить таблицу=)

Сейчас попробую слепить что-нибудь похожее.

Автор: Arantir 17.5.2013, 16:55

Цитата(Serious2008 @ 17.5.2013, 15:46

)

Версия 1.8.1 не подскажите как преобразовать это всё что у меня в on?

Сайт jQuery еще не закрыли, http://api.jquery.com/on/

Код


$('.img2').on(    
    mouseenter: function(evt) { },
    mouseleave: function(evt) { }
);

Автор: Sanchezzz 17.5.2013, 17:07

Код


$(document).on('mouseenter', '.img2 > img', function(ev) {
  $(this).stop().animate({width:"300px",height:"300px"}, 400);
});
$(document).on('mouseleave', '.img2 > img', function(ev) {
  $(this).stop().animate({width:"50px",height:"50px"}, 400);
});

 // и это должно сработать 

$(document).on('hover' /*'mouseenter mouseleave'*/, function(e) {
  var _this = $(this);
  if(e.type == 'mouseenter') {
      _this.stop().animate({width:"300px",height:"300px"}, 400);
  }
  else if (e.type == 'mouseleave') {
    _this.stop().animate({width:"50px",height:"50px"}, 400);
  }
});
 // еще 1-2 варианта можно придумать

document замените по возможности на не изменяющийся див желательно с уникальным ID селектор работает быстрей по #id

Автор: Serious2008 17.5.2013, 17:17

Цитата(Arantir @ 17.5.2013, 16:55)

Цитата(Serious2008 @ 17.5.2013, 15:46

)

Версия 1.8.1 не подскажите как преобразовать это всё что у меня в on?

Сайт jQuery еще не закрыли, http://api.jquery.com/on/

Код


$('.img2').on(    
    mouseenter: function(evt) { },
    mouseleave: function(evt) { }
);

Такое же но с .on не спасло.

http://jsfiddle.net/C3pMs/1/
вот я набросал но я не понимаю почему по кнопке ещё он не подгружает ещё изображения, а жалуется на то юзайте $.POST

Добавлено через 5 минут и 10 секунд

Цитата(Sanchezzz @ 17.5.2013, 17:07

)

Код


$(document).on('mouseenter', '.img2 > img', function(ev) {
  $(this).stop().animate({width:"300px",height:"300px"}, 400);
});
$(document).on('mouseleave', '.img2 > img', function(ev) {
  $(this).stop().animate({width:"50px",height:"50px"}, 400);
});

О вот с этим отлично заработало, спасибо.

Автор: Sanchezzz 17.5.2013, 17:34

Первый вариант у вас не сработал то что вы не указали параметр какой селектор прослушивать, если параметр не указан то используетс последний указатель в данном случаи это $( '.img2' )
.on({ event: function(){}, evetn2:function(){} } , '.img2 > img');