0

以下のコードは div を取り、クリックすると移動します。戻るボタンは、div を以前の場所に戻します。2 番目のアラートは、場合によっては複数回トリガーされます。誰かが理由を説明できますか？

<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がクリックされると、それらのハンドラがすべて起動します。3 回クリックすると.profile、3 つのクリック ハンドラーがオンに#closeなり、3 つすべてが起動します。

于 2012-09-13T21:06:42.910 に答える
1

原因は、.profile クラスをクリックするたびにイベントが #close に関連付けられることです。したがって、2 回クリックすると、2 回バインドされます。したがって、アラートを 1 回だけ表示するには、バインドを解除して再度関連付ける必要があります。

 $(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

あなたのコードの一部を変更しました

// 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 に答える
0

1.ページに複数の.profile要素があり、それらが互いにネストされている可能性がありますか?

--profile

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

2.バインディングのコードがなぜか 2 回呼び出されていますか? （問題では見えませんが、可能性が高いので推測です）

于 2012-09-13T21:01:06.260 に答える