Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Функия не работает на вновь добавившиеся элементы 
V
    Опции темы
Serious2008
Дата 17.5.2013, 15:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 294
Регистрация: 28.1.2011

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

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


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

Это сообщение отредактировал(а) Serious2008 - 17.5.2013, 16:02
PM MAIL   Вверх
Arantir
Дата 17.5.2013, 16:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Рыбак без удочки
**


Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55
Как вы представляете себе работу этой функции?
Код

  $(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'), иными словами, только для тех элементов, которые присутствовали на странице в момент вызова приведенной вами функции.



--------------------
interface Жопа {
    // ATTENTION: has to be implemented by every class of the project for proper project work
}
PM   Вверх
Serious2008
Дата 17.5.2013, 16:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 294
Регистрация: 28.1.2011

Репутация: нет
Всего: нет
Вот чтобы обмануть это дело, я сделал функцию 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); });
}


Которая как я надеялся обновит это дело, но оно не помогло. По этому очевидный вопрос как это можно ещё раз обновить? Или тут уже только обновление страницы?
PM MAIL   Вверх
Sanchezzz
Дата 17.5.2013, 16:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
Можно не на добавленные сделать события потом вставить в общий документ либо переопределить заново выполнив ваш код после вставки данных яксом.

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

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

Это сообщение отредактировал(а) Sanchezzz - 17.5.2013, 16:47


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Serious2008
Дата 17.5.2013, 16:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 294
Регистрация: 28.1.2011

Репутация: нет
Всего: нет
Цитата(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 или полный код, с версткой категорически нет желания лепить таблицу=)

Сейчас попробую слепить что-нибудь похожее.
PM MAIL   Вверх
Arantir
Дата 17.5.2013, 16:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Рыбак без удочки
**


Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 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) { }
);


Это сообщение отредактировал(а) Arantir - 17.5.2013, 16:57


--------------------
interface Жопа {
    // ATTENTION: has to be implemented by every class of the project for proper project work
}
PM   Вверх
Sanchezzz
Дата 17.5.2013, 17:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
Код

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

Это сообщение отредактировал(а) Sanchezzz - 17.5.2013, 17:08


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Serious2008
Дата 17.5.2013, 17:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 294
Регистрация: 28.1.2011

Репутация: нет
Всего: нет
Цитата(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);
});

О вот с этим отлично заработало, спасибо.
PM MAIL   Вверх
Sanchezzz
Дата 17.5.2013, 17:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

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

Это сообщение отредактировал(а) Sanchezzz - 17.5.2013, 17:37


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1470 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.