0

下面的代码需要一个 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>
4

4 回答 4

2

每次.profile单击时，您都会向#close. 然后，一旦#close单击，所有这些处理程序都会触发。如果您单击.profile3 次，则会打开三个单击处理程序，#close并且所有三个都会触发。

于 2012-09-13T21:06:42.910 回答
1

看起来罪魁祸首是每次单击 .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 ..

于 2012-09-13T21:02:48.293 回答
0

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

--profile

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

2.绑定的代码不知何故被调用了两次？（在问题中不可见，但只是猜测，因为它很有可能）

于 2012-09-13T21:01:06.260 回答
0

我已经修改了你的部分代码

// 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();
});
于 2012-09-13T21:04:31.787 回答