Question

HTML：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link type="text/css" href="galerina.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="galerina">
            <img class="img1" src="images/1.jpg" alt=""/>
            <img class="img2" src="images/2.jpg" alt=""/>
            <img class="img3" src="images/3.jpg" alt=""/>
            <img class="img4" src="images/4.jpg" alt=""/>
            <p/>
        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="galerina.js"></script>
    </body>
</html>

CSS：

div.galerina{
    max-width: 500px;
    position: relative;
}

div.galerina img{
    margin: auto;
    display: none;
    opacity: 0;
}

div.galerina img.galerina1, div.galerina img.bullet{
    display: block;
    opacity: 1;
}

JS：

/* Find each div with class galerina */
$("div.galerina").each(function(){
    var gal=$(this);
    var size=$(gal).children("img").size();
    var i=0;
    /* Find each img tag inside the div */
    $(gal).children("img").each(function(){
        var img=$(this);
        /* Append an image to the gal and show an alert */
        $(gal).append("<img src='images/bullet.png'/>").click(function(){
            alert('test');
        });
    });
});

点击子弹弹出4个测试警告？

Answer 1

这是因为您已经说过alert('test')中img个div.galerina个孩子应该被调用{{1}}。我已经编辑了您问题的格式，以帮助您了解原因。

Answer 2

我认为你对$(gal).append()返回的内容感到困惑，它会返回$(gal)而不是附加的内容。所以，当你这样说时：

$(gal).append("<img src='images/bullet.png'/>").click(function() { /* ... */ });

您正在向$(gal)添加点击处理程序，并且每次执行循环时都会执行此操作，因此最终会有四个相同的点击处理程序。我想你想要更像这样的东西：

var $img = $('<img src="images/bullet.png"/>');
$img.click(function() { alert('test'); });
$(gal).append($img);

这会将点击处理程序放在附加图像而不是$(gal)上。

Answer 3

通过使用事件委派，您可以避免将点击处理程序绑定到每个图像的麻烦：

$("div.galerina").delegate("img", "click", function() {
    alert("test");
});

You can try it here.

参考：

http://api.jquery.com/delegate/

一个元素，一个事件，一个警报，一个单击，4条消息

3 个答案: