Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не работает hover() после добавление элемента в DOM (https://javascript.ru/forum/jquery/28979-ne-rabotaet-hover-posle-dobavlenie-ehlementa-v-dom.html)

Deff 10.06.2012 12:41

jeysmook,
Суть в том что обработчик нужно ставить либо
а) При наличии элемента на странице (click
b) Либо вариантами live bind и one (Последнии два, нун ставить после .append элемент
http://jquery-docs.ru/Events/live/#typefn

jeysmook 10.06.2012 13:39

Deff,
Понятно, спасибо за объяснения )

Deff 10.06.2012 14:02

Цитата:

Сообщение от jeysmook
а если так то не работает... Не пойму почему?

Установка обработчика работает ранее появления элемента на странице, он ни к чему не привязывается;
Можно попробовать так, если внедрение элемента единственное,(если нет - нун ставить обработчик через .live

function Hover(){
     		   $('a.link').css({"opacity":"0.4"});
		   $('a.link').hover(function(){
				  $(this).stop().animate({opacity:1.0},800);
		   },function(){
				  $(this).stop().animate({opacity:0.4},800);
	   });
  }
	var FirstClick=true;
		$('.go').click(function(){
			$('body').append('<a href="" class="link">Главная</a>');

		if(FirstClick){FirstClick=false;Hover()} //Ставим Обработчик

			return false;
		});		   

});

Deff 10.06.2012 14:03

Ксать эффект полностью реализуется в css, -Стоит ли мучать скрипты ?

jeysmook 10.06.2012 14:13

Deff,
Так эффект замедленный )
а я так подошел к решению вопроса, нормально будет или нет ?
$(function(){
		$('.go').click(function(){
			$('body').after('<a href="" class="link">Главная</a>');
			return false;
		});
		$('body').live('mousemove', function(){
			$('a.link').animate({opacity:'0.4'},0);
			$('a.link').hover(function(){
				$(this).stop().animate({opacity:1.0},800);
			},function(){
				$(this).stop().animate({opacity:0.4},800);
			});
		});
	});

Deff 10.06.2012 14:31

<style>
a.link{
   opacity: 1.0; /* все браузеры кроме ИЕ ниже девятой */
   filter: Alpha(opacity=100); /* для ИЕ ниже девятой */
   transition-duration: 0.69s;
  -webkit-transition-duration: 0.69s;
  -moz-transition-duration: 0.69s;
  -o-transition-duration: 0.69s;
  -ms-transition-duration: 0.69s; /* IE9+ */
}
a.link:hover {
   opacity: 0.4; /* все браузеры кроме ИЕ ниже девятой */
   filter: Alpha(opacity=40); /* для ИЕ ниже девятой */
}
</style>

<a href="" class="link">Главная</a>

jeysmook 10.06.2012 14:36

Deff,
Прикольно, не знал что с ccs так можно , спасибо)

Deff 10.06.2012 15:02

чуть поправил css (убрал лишние атрибуты


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