mouseenter 在 div img 上不起作用答案

【问题标题】：mouseenter not working on div imgmouseenter 在 div img 上不起作用
【发布时间】：2015-08-13 18:12:21
【问题描述】：

使用 jquery 制作自己的滑块首先使用 .list 类将文件夹中的图像列出到 div，然后使用 mouseenter 在 div id #show 中显示每个图像。但是 mouseenter 无法处理（'.list 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);
        });

});

【问题讨论】：

在 ajax 完成之前，您已经执行了 jQuery 以将事件绑定到 .list img，因此在这些图像存在之前。
这个问题一直悬而未决，请将其中一个答案标记为已接受。

标签： jquery html css

【解决方案1】：

因为脚本在加载时运行，并且不等待该 ajax 调用完成（除非您在成功函数中包含绑定），所以您尝试在事件存在之前将其绑定到 .list img。

.list 存在，所以使用.on() 代替$('.list img').mouseenter(function(){ 委托

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

这会将事件绑定到.list，但会在.list img 上触发

【讨论】：

【解决方案2】：

由于 AJAX 的异步特性，当您绑定事件时，DOM 中很可能不存在.list img。

尝试使用jquery的.on()绑定list上的事件，但触发img上的事件：

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

【讨论】：

【解决方案3】：

mouseenter 将不起作用，因为您在 DOM 可用于 ajax 之前绑定事件。

使用jQuery's .on() 方法。

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

【讨论】：