Question

使用jquery制作自己的滑块首先使用class .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);
        });

});

Answer 1

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

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

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

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

Answer 2

由于AJAX的异步特性，当您绑定事件时，

Tadpole f = new Tadpole();很可能在DOM中不存在。

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

img

Answer 3

Dim xmlRoot As XElement = XElement.Load(xmlPath_var) Dim populatedGroups As IEnumerable(Of XElement) = From el In xmlRoot.<CustomGroup> Where el.<Members>.<Member>.Count > 1 Select el For i = 0 To populatedGroups.Count - 1 If xmlCodeGenerator_bg.CancellationPending = True Then e.Cancel = True Exit For Else output.AppendText(vbTab & "<CustomGroup>" & vbNewLine) output.AppendText(vbTab & vbTab & "<Members>" & vbNewLine) For ie = 0 To populatedGroups.<Members>.<Member>.Count - 1 output.AppendText(vbTab & vbTab & vbTab & "<Member>" & populatedGroups.<Members>.<Member>.ElementAt(ie).Value & "</Member>" & vbNewLine) Next output.AppendText(vbTab & vbTab & "</Members>" & vbNewLine) output.AppendText(vbTab & vbTab & "<Name>" & populatedGroups.ElementAt(i).<Name>.Value & "</Name>" & vbNewLine) output.AppendText(vbTab & "</CustomGroup>" & vbNewLine) End If xmlCodeGenerator_bg.ReportProgress(i) Next将无法正常工作，因为您在ajax中可以使用DOM之前绑定事件。

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

mouseenter

mouseenter没有在div img上工作

3 个答案: