JQuery Dialog + .Toggle(), используемый в функции, не работает должным образом при нажатии более одного раза

Я новичок в диалоговых окнах JQuery UI и использую.Toggle() для отображения информации в диалоговом окне, и у меня неожиданное поведение.

Диалоговое окно устанавливается один раз, но код, который отображается (скрывать / показывать) в диалоговом окне, содержится в функции, которую можно вызывать много раз, в зависимости от действий пользователя.

Вот тестовый код 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" или "Пожалуйста, нажмите здесь", чтобы скрыть дополнительную информацию.

4) Закройте диалоговое окно и повторите вышеупомянутые 3 шага снова в "Тесте 1", "Тесте 2" и т. Д.

Что на самом деле происходит! (Шаги репликации)

Обновите страницу браузера.

1) Нажмите "Тест 1" - откроется диалоговое окно с сообщением по умолчанию. 2) нажмите "Пожалуйста, нажмите здесь", затем отобразится скрытое отображение "Дополнительная информация 1,.....". 3) Сообщение по умолчанию + дополнительная информация отображается до тех пор, пока пользователь не нажмет "X", чтобы закрыть диалоговое окно, или раздел "Пожалуйста, нажмите здесь", чтобы скрыть дополнительную информацию.

4) Когда диалог закрывается в первый раз. 5) Снова нажмите на любой текст "Test 1", "Test 2", чтобы снова открыть диалоговое окно. Нажмите "Пожалуйста, нажмите здесь", шоу дополнительной информации появится и останется на экране, пока пользователи не закроют диалоговое окно или не нажмут "Пожалуйста, нажмите здесь" снова.

Произошли два разных сценария, но это случайный случай, который происходит при обновлении страницы: a) Когда диалоговое окно отображается во второй раз, дополнительная информация никогда не отображается при нажатии "Пожалуйста, нажмите здесь". Когда диалоговое окно закрыто, а затем отображается в третий раз, отображается дополнительная информация.

б) Когда диалоговое окно отображается во второй раз, при нажатии "Пожалуйста, нажмите здесь", дополнительная информация отображается, а затем сразу исчезает. Закрытие диалогового окна и повторное отображение диалогового окна, дополнительная информация отображается / скрывается / отображается / скрывается немедленно и т. Д.......

Я в растерянности от того, как получить ожидаемое поведение, когда пользователь может многократно щелкать и отображать диалоговое окно, а скрытие / отображение дополнительной информации остается отображаемым до тех пор, пока диалоговое окно не будет закрыто или не будет нажата кнопка "Пожалуйста, нажмите здесь". (много раз или только один раз), а затем диалоговое окно закрывается.

Так что любая помощь будет оценена.

Приветствия заранее.

Источник

2 ответа

Решение

Вы связываете событие click каждый раз в 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;
}
Источник

Вот пример jsFiddle, насколько я понимаю требования.

Модифицированный пример, когда Мурали прибил основной вопрос. Я бы предпочел связывать события вне функции и не нужно перепривязывать / удалять каждый раз, так как каждый раз на один и тот же элемент DOME ссылаются.

$(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();
    });
});

Источник
Другие вопросы по тегам