0

私は JQuery UI ダイアログを初めて使用し、.Toggle() を使用してダイアログ ボックス内に情報を表示すると、予期しない動作が発生します。

ダイアログ ボックスは 1 回起動されますが、ダイアログ ボックスに表示 (非表示/表示) されるコードは、ユーザーの操作に応じて何度も呼び出すことができる関数内に含まれています。

テストのhtml + javascriptコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Online Booking Form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
<script type="text/javascript">
$(document).ready(function(){

    var dialog = $( "#dialog-modal" ).dialog({
        autoOpen: false,
        draggable: false,
        resizable: false,
        modal: true,
        height: 'auto',
        width: 340,
        maxWidth: 340,
        minWidth: 340,
        close: function() { $('#requal_detailed_info').css("display", "none"); }
    });

    function loadRequalInfo() {
        dialog.dialog('open');

        $('#requal_toggle').click(function() {
            $('#requal_detailed_info').toggle(function() {
            });
        });

        return false;
    }

    $('#test1').click(function() {
        loadRequalInfo();
    });
    $('#test2').click(function() {
        loadRequalInfo();
    });
    $('#test3').click(function() {
        loadRequalInfo();
    });
    $('#test4').click(function() {
        loadRequalInfo();
    });
    $('#test5').click(function() {
        loadRequalInfo();
    });
    $('#test6').click(function() {
        loadRequalInfo();
    });
});
</script>
</head>
<body>
<div class="bodycopy" id="dialog-modal" title="Test Message Box" style="display:none;">
    <div class="requal" id="requal_default_info"><p>MESSAGE SHOWN ON DIALOG DISPLAY</p></div> 
    <div class="requal_open" id="requal_toggle">Please click here</div>
    <div class="requal" id="requal_detailed_info" style="display:none" ><p><hr /></p><p>MORE INFORMATION 1</p><p>MORE INFORMATION 2</p><p>MORE INFORMATION 3</p><p>MORE INFORMATION 4</p></div>
</div>
<div class="requal" id="test1" name="test1">Test 1</div><br />
<div class="requal" id="test2" name="test2">Test 2</div><br />
<div class="requal" id="test3" name="test3">Test 3</div><br />
<div class="requal" id="test4" name="test4">Test 4</div><br />
<div class="requal" id="test5" name="test5">Test 5</div><br />
<div class="requal" id="test6" name="test6">Test 6</div><br />
</body>
</html>

予想される動作:

1) [テスト 1] をクリックします。ダイアログが開き、デフォルトのメッセージが表示されます。2) [ここをクリックしてください] をクリックすると、[詳細情報 1,.....] という非表示が表示されます。3) デフォルトのメッセージ + 追加情報は、ユーザーが「X」または「ここをクリックしてください」div をクリックして追加情報を非表示にするまで表示されたままになります。

4) ダイアログを閉じ、上記の 3 つの手順を「テスト 1」、「テスト 2」などのいずれかでもう一度繰り返します。

実際に起こっていることは何ですか！(複製手順)

ブラウザ ページを更新します。

1) [テスト 1] をクリックします。ダイアログが開き、デフォルトのメッセージが表示されます。2) [ここをクリックしてください] をクリックすると、[詳細情報 1,.....] という非表示が表示されます。3) デフォルトのメッセージ + 追加情報は、ユーザーが「X」をクリックしてダイアログを閉じるか、「ここをクリックしてください」div をクリックして追加情報を非表示にするまで表示されたままになります。

4) 初めてダイアログを閉じたとき。5) 「テスト 1」、「テスト 2」のいずれかのテキストをもう一度クリックして、ダイアログ ボックスを再度表示します。[ここをクリックしてください] をクリックすると、追加情報が表示され、ユーザーがダイアログ ボックスを閉じるか、[ここをクリックしてください] を再度押すまで画面に表示されたままになります。

2 つの異なるシナリオが発生しましたが、どちらがページの更新時に発生するかはランダムです。ダイアログ ボックスを閉じて 3 回目に表示すると、追加情報が表示されます。

b) ダイアログ ボックスが 2 回目に表示されたときに、[ここをクリックしてください] をクリックすると、余分な情報が表示され、すぐに消えます。ダイアログボックスを閉じて再度ダイアログボックスを表示すると、追加情報がすぐに表示/非表示/表示/非表示、など……

ユーザーがダイアログボックスをクリックして何度も表示でき、ダイアログボックスが閉じられるか「ここをクリックしてください」がクリックされるまで、追加情報の非表示/表示が表示されたままになる、期待される動作を取得する方法について途方に暮れています(何度もまたは一度だけ) をクリックすると、ダイアログ ボックスが閉じます。

そのため、どんな助けでも大歓迎です。

事前に乾杯。

4

2 に答える 2

1

loadRequalInfo（）で毎回クリックイベントをバインドしています。つまり、クリックイベントをさらに追加することになります。

既存のものを削除して追加する方がよい

これを試して

 function loadRequalInfo() {
    dialog.dialog('open');
    $('#requal_toggle').unbind('click'); // remove old if anything bound
    $('#requal_toggle').click(function() {
        $('#requal_detailed_info').toggle(function() {
        });
    });

    return false;
}
于 2012-10-19T11:56:41.407 に答える
0

要件を理解しているので、jsFiddleの例を次に示します。

Muraliがコアの問題を解決したため、例を修正しました。これは毎回参照されるのと同じDOMElementであるため、関数の外部でイベントをバインドし、毎回再バインド/削除する必要はありません。

$(document).ready(function() {

    var dialog = $("#dialog-modal").dialog({
        autoOpen: false,
        draggable: false,
        resizable: false,
        modal: true,
        height: 'auto',
        width: 340,
        maxWidth: 340,
        minWidth: 340,
        close: function() {
            $('#requal_detailed_info').toggle()
        }
    });

    $('#requal_toggle').click(function() {
        $('#requal_detailed_info').toggle();
    });



    function loadRequalInfo() {
        dialog.dialog('open');

        return false;
    }

    $('#test1').click(function() {
        loadRequalInfo();
    });
    $('#test2').click(function() {
        loadRequalInfo();
    });
    $('#test3').click(function() {
        loadRequalInfo();
    });
    $('#test4').click(function() {
        loadRequalInfo();
    });
    $('#test5').click(function() {
        loadRequalInfo();
    });
    $('#test6').click(function() {
        loadRequalInfo();
    });
});

</p>

于 2012-10-19T11:55:49.653 に答える