mouseenter не работает над div img

Создание собственного слайдера с помощью jquery сначала перечислите изображения из папки в div с помощью класса .list, а затем с помощью mouseenter, чтобы показать каждое изображение в div id #show. , но mouseenter не работает («.list img»). где проблема?mouseenter не работает над div img

HTML:

<html> 
<head> 
<meta charset="utf-8" /> 
<link rel='stylesheet' href='css/style.css' /> 
<script type="text/javascript" src="js/jquery.min.1.6.js"></script> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 
<body> 
<div id="container"> 
    <div id="show"></div> 

    <div id="right">right</div> 
    <div id="left">left</div> 

    <div id="listwapper"> 
     <div class="list"></div> 
    </div> 
</div> 

</body> 
</html>

CSS:

.list 
{ 

    height:100px; 
} 
.list img 
{ 
    width:98px; 
    height:96px; 
    border-right:1px solid #ffa800; 
    border-left:1px solid #ffa800; 
    border-bottom:2px solid #ffa800; 
    border-top:2px solid #ffa800; 
    border-radius:0px; 
    cursor:pointer; 
} 
#listwapper 
{ 
    position:relative; 
    height:100px; 
    width:500px; 
    overflow-y: hidden; 
    overflow-x: hidden; 
} 
#right 
{ 
    float:right; 
} 
#left 
{ 
    float:left; 
} 
#container 
{ 
    width:500px; 
    border:1px solid #000; 
    margin:20px; 
} 
#show,#show img 
{ 
    width:500px; 
    height:300px; 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
}

JQuery:

$().ready(function(){ 
     var dir = "http://localhost/slider/images"; 
     var imageswidth = 0; 
     $.ajax({ 
      url: dir, 
      success: function(data){ 
      $(data).find("a:contains(.jpg)").each(function(){ 
       // will loop through 
       var images = $(this).attr("href"); 
       $('.list').append('<img class="image" src="'+ dir + '/' + images +'"></img>'); 
       imageswidth = imageswidth + 100; 
       $(".list").css("width", imageswidth); 
      }); 
      } 
     }); 


     $('#right').mouseenter(function(){ 
      interval1 = setInterval(function(){ 
       $("#listwapper").animate({scrollLeft: '+=300'}, 500); 
      },500); 

     }); 

     $('.list img').mouseenter(function(){ 
      var imageUrl = $(this).attr("src"); 
      $('#show').css('background-image', 'url("' + imageUrl + '")'); 
     }); 


     $('#right').mouseleave(function(){ 
      clearInterval(interval1); 
     }); 

     $('#left').mouseenter(function(){ 
      interval2 = setInterval(function(){ 
       $("#listwapper").animate({scrollLeft: '-=300'}, 500); 
      },500); 
     }); 

     $('#left').mouseleave(function(){ 
      clearInterval(interval2); 
     }); 

});

источник

2015-08-13 reza sadeghi

Вы выполнили jQuery, чтобы связать событие с именем .list img перед завершением работы ajax, поэтому до того, как эти изображения существуют. – Popnoodles

Этот вопрос остался в неопределенности, пожалуйста, отметьте один из ответов, как принято. – Popnoodles

Поскольку скрипт запускается при загрузке, и не ждать, что Ajax вызова, чтобы закончить (если вы включаете привязку внутри функции успеха), вы пытались связать событие с .list img, прежде чем они существуют.

.list существует, поэтому вместо $('.list img').mouseenter(function(){ делегата с помощью .on()

$('.list').on('mouseenter', 'img', (function(){

Это связывает событие .list но триггера .list img

источник

2015-08-13 18:22:10 Popnoodles

спасибо, котор работали. –

@rezasadeghi Избегайте комментариев «спасибо», вместо этого отметьте ответ как принятый. – Xufox

.list img, скорее всего, не существует в DOM, когда являются обязательными для ваших событий в связи с асинхронный характер AJAX.

Try с помощью JQuery-х .on() связать событие на list но вызвать событие на img:

$('.list').on('mouseenter','img',function(){ 
    var imageUrl = $(this).attr("src"); 
    $('#show').css('background-image', 'url("' + imageUrl + '")'); 
});

источник

2015-08-13 18:21:50 Turnip

mouseenter не будет работать, потому что вы связыванием события до DOM будет доступно в ajax.

Использование jQuery's .on() способ.

$('body').on('mouseenter','.list img',function(){ 
    var imageUrl = $(this).attr("src"); 
    $('#show').css('background-image', 'url("' + imageUrl + '")'); 
});

источник

2015-08-13 18:22:34 Samir

mouseenter не работает над div img

ответ

Смежные вопросы