JQuery Dialog + .Toggle() 在函数中使用，多次单击时无法按预期工作答案

【问题标题】：JQuery Dialog + .Toggle() used in a function, not working as expected when clicked more than onceJQuery Dialog + .Toggle() 在函数中使用，多次单击时无法按预期工作
【发布时间】：2012-10-19 11:44:58
【问题描述】：

我是 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) 当对话框第二次显示时，点击“请点击这里”时，额外的信息显示出来，然后立即消失。关闭对话框并再次显示对话框，额外的信息立即显示/隐藏/显示/隐藏等......

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

因此，我们将不胜感激。

提前干杯。

【问题讨论】：

标签： jquery function toggle show-hide

【解决方案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;
}

【讨论】：

Murali，这很好用，而且解释也很清楚。很好。

【解决方案2】：

据我了解，这是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();
    });
});

【讨论】：

啊啊啊！！！！！！我没有想到将切换代码移到函数之外，只在函数内部留下 open 调用。让它工作。