Mozilla 和 Chrome 中的 Jquery Dialog 奇怪行为答案

【问题标题】：Jquery Dialog strange behaviour in Mozilla and ChromeMozilla 和 Chrome 中的 Jquery Dialog 奇怪行为
【发布时间】：2011-05-31 10:55:43
【问题描述】：

我正在尝试使用多个按钮打开一个 Jquery 对话框，实际上我正在使用一个示例：http://jsfiddle.net/UQFxP/25/ Pawel Zubrycki 好心给了我，但奇怪的是，当我将它添加到我的项目时 它只在 IE 中有效，而在 Mozilla 和 Chrome 中，对话框只出现一秒钟然后立即消失，之后我被带到另一个页面（上一页）。

编辑

这是html代码：

<center>
    <form id="form1" name="form1" method="get" action="">
        <c:choose>
            <c:when test="${not empty lista}">
                <div class="scroll">
                    <fieldset >
                        <table id="tabla_estilo" border="0" align="center" cellpadding="2" cellspacing="1">
                            <thead>
                                <tr class="tableheader">                                  
                                   <!--Some other columns-->
                                    <td align="center">Reason</td>

                                </tr>
                            </thead>
                            <c:forEach items="${lista}" var="item">
                                <tbody>
                                    <tr>                                        
                                        <td>
                                            <button id="Add_<c:out value="${item.codigo}"/>" >Agregar</button>
                                            <input type="text" name="reason_<c:out value="${item.codigo}"/>" value="" />                                     

                                        </td>
                                    </tr>
                                </tbody>
                            </c:forEach>
                        </table>
                        <br/>
                    </fieldset>
                </div>               
            </c:when> 
        </c:choose>       
    </form>
    <div class="demo">
        <div id="formReason" title="Add Reason">
            <p class="validateTips">All the fields are required.</p>
            <form>
                <fieldset id="fieldsetForm">
                    <label for="reason" id="lblreason">Reason</label>
                    <textarea name="reason" id="reason"  rows="4" cols="20" class="text ui-widget-content ui-corner-all"></textarea>
                </fieldset>
            </form>
        </div>
    </div>
</center>

和jquery代码：

$(document).ready(function() {

    $("#dialog:ui-dialog").dialog("destroy");

    var reason = $("#reason"),
        allFields = $([]).add(reason),
        tips = $(".validateTips");

    function updateTips(t) {
        tips.text(t).addClass("ui-state-highlight");
        setTimeout(function() {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
            return false;
        } else {
            return true;
        }
    }
    $("#formReason").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Add Reason": function() {
                var bValid = true;
                allFields.removeClass("ui-state-error");

                bValid = bValid && checkLength(reason, "reason", 1, 120);

                if (bValid) {
                    //Add Functions
                    reason_name = $(".active_button").attr("id").replace("Add", "reason");
                    $('input[name^="' + reason_name + '"]').val(reason.val());
                    $(this).dialog("close");

                }
            },
            Cancelar: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $(".active_button").removeClass("active_button");
            allFields.val("").removeClass("ui-state-error");
        }
    });

    function submit_form(ev) {
        $(this).addClass("active_button");
        $("#formReason").dialog("open");
    }

    $('button[id^="Add"]').click(submit_form);

});

如您所见，它与网站上的示例相同或几乎相同。

代码有问题吗？有什么不兼容 Mozilla 和 Chrome 的吗？

先谢谢

【问题讨论】：

给定的例子（在提到的网站上）在 FF 中工作。您可能没有正确实施它。请更新代码 sn-p 和 JavaScript 错误（如果有）。
我并不是说该示例在 jsfiddle.net 无法正常工作，我说当我将它添加到我的项目时它只适用于 IE，并且我添加的代码完全一样在网站上：'（，我要更新我的问题
我更新了我的问题，请检查:(

标签： jquery jquery-ui-dialog

【解决方案1】：

您的按钮正在将外部表单作为“get”提交，因此当真正重新加载页面时，看起来对话框正在消失。

如果您删除此表单标签：

<form id="form1" name="form1" method="get" action=""></form>

按钮应该只执行 javascript 来创建对话框

【讨论】：