Question

下面的代码采用div并在点击时移动它。返回按钮将div移回原来的位置。第二个警报有时会被触发多次。有人可以解释原因吗？

<html>
        <head>
            <script src="js/jquery.js"></script>
            <style>

            .profile {

                width: 250px;
                height: 250px;
                margin-top: 250px;
                margin-left: 250px;
                border: solid black 1px;
            }

        </style>

        </head>
        <body>
        <script>

            $(document).ready(function(){

                $('.profile').click(function(){

                                    // store current position
                    var activeProfile = $(this);
                    var profilePosition = activeProfile.offset();
                    var initialLeft = profilePosition.left;
                    var initialTop = profilePosition.top;


                    alert(initialLeft);

                    $(this).css({'position' : 'absolute', 'top' : 0, 'left' : 0, 'margin': 0});

                            // return to original start position
                        $('#close').click(function(e) {
                        alert('sometimes i get triggered multiple times!');
                        activeProfile.css({'left' : initialLeft, 'top' : initialTop});
                        e.stopPropagation();


                     });    

                });

            })

        </script>

            <div class="profile">
                <button id="close">Return</button>
            </div>

        </body>
    </html>

Answer 1

每次点击.profile时，您都会向#close添加额外的点击处理程序。然后，单击#close后，所有这些处理程序都将触发。如果您点击.profile 3次，#close上有三个点击处理程序，并且全部三个点击处理程序。

Answer 2

看起来罪魁祸首是每次单击.profile类时它会将事件关联到#close ..所以如果你点击两次它会绑定两次..所以你需要解除绑定并再次关联才能看到警报一旦..

 $(document).ready(function () {

    $('.profile').on('click', function () {

        // store current position
        var activeProfile = $(this);
        var profilePosition = activeProfile.offset();
        var initialLeft = profilePosition.left;
        var initialTop = profilePosition.top;


        alert(initialLeft);

        $(this).css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'margin': 0
        });

        // return to original start position
        $('#close').unbind().on('click', function (e) {
            alert('sometimes i get triggered multiple times!');
            activeProfile.css({
                'left': initialLeft,
                'top': initialTop
            });
            e.stopPropagation();


        });

    });

})

这是旧代码的FIDDLE

这是UPDATE FIDDLE与之关联的unbind事件..

Answer 3

1.您网页上可能有多个.profile元素，它们可能互相嵌套？

--profile

----profile (so a click here would bubble up and trigger two handlers)

2.绑定代码以某种方式被调用两次？（不明显，但只是猜测，因为它很可能）

Answer 4

我修改了部分代码

// return to original start position
$('#close').click(function(e) {
     e.preventDefault();
     alert('sometimes i get triggered multiple times!');
     activeProfile.css({'left' : initialLeft, 'top' : initialTop});
     e.stopPropagation();
});

Jquery问题：为什么我的警报会被多次触发？

4 个答案: