JQuery - .hover () после .load () изображения и .append (), ред .find () div - PullRequest
Новая
       4

JQuery - .hover () после .load () изображения и .append (), ред .find () div

1 голос
/ 24 января 2011

Привет :) У меня возникла небольшая проблема.

(краткая форма: всякий раз, когда страница заполняется с помощью .each (), функции .hover и .click не будут работать. Хотя, если я заполняю страницу вручную, .hover () и .click () работают как очарование)

раньше у меня было это: 

<imgThumb imgn="1">thumb</imgThumb>
<imgThumb imgn="2">thumb</imgThumb>

и это, 

   $("imgt").hover(
 function () {
  var imgN = $(this).attr("imgn");
  var img = new Image();
  $(img).load(function(){
 $(this).hide();
 $("#mainRight_PubSpot").append(this);
 $(this).fadeIn();
  }
  )
  .attr("src","image/thumb"+imgN+".jpg");
 }, 
 function () {
   $("#mainRight_PubSpot").find("img:last").remove();
 }

); работал как шарм, не Biggies. Пока я не заменил <imgThumb> на это: 

 $.get('gallery.php',
 function(data){
 var obj = jQuery.parseJSON(data); 
 //alert(obj)


 $.each(obj,function(index, value){
   //alert(this);
   var n = index+1;
   //alert(""+n+" "+index);
   var nimg = new Image();
    $(nimg).load(function() {
     $(this).hide();
     /*$("#galImg").css({
      'width':50,
      'height':50
     });*/
     $("#mainLeft_imgHold").append("<imgt imgn="+n+"></imgt>")
     $("#mainLeft_imgHold").find('imgt:last').append(this);
     $(this).fadeIn();
    }).attr({
     src:""+this,
     imgn:""+n,
     id:"imgThumb"
     });
  });
     }
 );

Теперь изображения загружаются без пота, хотя функции .hover и .click не будут работать.

Кто-нибудь намекает на то, что может быть причиной всего этого волнения?

Ответы [ 2 ]

3 голосов
/ 24 января 2011

Если вы загружаете элементы после загрузки страницы (асинхронно и т. Д.), Вам необходимо прикрепить обработчики, такие как hover и click, с помощью метода .live().

Вот ссылка на страницу API: http://api.jquery.com/live/

Обратите внимание, что .live() не поддерживает все более умные слушатели jQuery (например, hover) из коробки. Вам может понадобиться создать экземпляры mouseover и mouseout вручную: 

$("imgt").live('mouseover', function(){...

$("imgt").live('mouseout', function(){...

Есть способы обойти это путем создания собственных слушателей, но это еще один ответ на другой вопрос.

1 голос
/ 24 января 2011

Причина, по которой он не работает, заключается в том, что когда вы добавляете новые элементы на страницу с помощью Javascript, DOM изменяется, и Javascript необходимо повторно обработать.

http://api.jquery.com/live/ может исправить это за вас, или вы можете попробовать реализовать собственный метод проверки, изменился ли DOM с помощью обработчика .change().

...