0

我是 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”或“请单击此处”div来隐藏额外信息。

4) 关闭对话框，然后在“测试 1”、“测试 2”等上再次重复上述 3 个步骤...

究竟发生了什么！（复制步骤）

刷新浏览器页面。

1) 单击“测试 1”- 对话框打开，显示默认消息。2）点击“请点击这里”，然后显示一个隐藏的显示“更多信息1，.....”。3）默认消息+额外信息一直显示，直到用户单击“X”关闭对话框或“请单击此处”div隐藏额外信息。

4) 当对话框第一次关闭时。5) 再次单击任何“Test 1”、“Test 2”文本，再次弹出对话框。单击“请单击此处”，额外信息显示出现并停留在屏幕上，直到用户关闭对话框或再次按“请单击此处”。

出现了两种不同的情况，但在页面刷新时出现哪种情况是随机的： a) 当对话框第二次显示时，单击“请单击此处”时从不显示额外信息。当对话框关闭，然后第三次显示时，会显示额外的信息。

b) 对话框第二次显示时，点击“请点击这里”时，额外的信息显示出来，然后立即消失。关闭对话框并再次显示对话框，额外的信息立即显示/隐藏/显示/隐藏等......

我不知道如何获得预期的行为，用户可以多次单击并显示对话框，并且额外信息的隐藏/显示一直显示，直到对话框关闭或单击“请单击此处” （多次或仅一次），然后关闭对话框。

因此，任何帮助将不胜感激。

提前喝彩。

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 回答