Question

我有一个从 ajax 调用具有特定目标的表单的页面。此表单有一个删除条目，并使用 jQuery对话框的警告。一切都很好。但是：在做了更改甚至没有做之后，当我打开另一个表单（通过ajax调用的不同表单）并且我调用下面描述的相同代码时。当提交对话框时，#var_blabla的值为1（第一个对话框的值打开/加载），那时应为'2'。

我试着想出来..所以我的问题不是因为对话它自己，因为我尝试加载没有构造函数和对话框的第二页没有打开（应该是什么预期）。问题出在“提交删除”按钮上，该按钮具有事件功能，并且在创建的另一个上保持活动状态。

该网站有很多表单和每个表单的许多对话框，是否有等待取消绑定，或完全破坏对话框和按钮？想法好吗？

由于

简化的第一个对话呼叫代码：

$("#dialog-confirm-elimina").dialog({
    autoOpen: false,
    resizable: false,
    height:220,
    modal: true,
    buttons: {
        'Submit Delete': function() { $('#var_blabla').val('1');
                       $('#form_submit').submit();
                       $(this).dialog('close');
        },
        Cancel: function() {
                       $(this).dialog('close');
        }
}

简化的第二个对话框调用代码：

  $("#dialog-confirm-elimina").dialog({
        autoOpen: false,
        resizable: false,
        height:220,
        modal: true,
        buttons: {
            'Submit Delete': function() { $('#var_blabla').val('2');
                           $('#form_submit').submit();
                           $(this).dialog('close');
            },
            Cancel: function() {
                           $(this).dialog('close');
            }
    }

更新

<script type="text/javascript">
submited=false;
var toggleOpened = true;
$("#admin_retractil_1").click(function () {

    if(!toggleOpened){
        $('#admin_retractil_1').toggleClass('toggleGESBHeadown');
        toggleOpened=true;
        }
    else{
        $('#admin_retractil_1').toggleClass('toggleGESBHeadown');
        toggleOpened=false;
        }
            var objecto = $(this).attr("id");
            $('#' + objecto+"_div").slideToggle("slow");
        });

var toggleOpened2 = false;
$("#admin_retractil_2").click(function () {

    if(!toggleOpened2){
        $('#admin_retractil_2').toggleClass('toggleGESAHeadown');
        toggleOpened2=true;
        }
    else{
        $('#admin_retractil_2').toggleClass('toggleGESAHeadown');
        toggleOpened2=false;
        }
            var objecto = $(this).attr("id");
            $('#' + objecto+"_div").slideToggle("slow");
        });

$(document).ready(function() {
                //$( "button").button();
        var locked = true;
        $( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
        $( "#EditDataForm" ).click(function() {
                    if(locked){
                        locked = false;
                        $( "#EditDataForm").button({ icons: { primary: "ui-icon-unlocked" }});
                        $('#edit_data_admin').slideToggle("slow");
                        $('#view_data_admin').slideToggle("slow");

                   }else{
                        locked = true;
                        $( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
                        $('#edit_data_admin').slideToggle("slow");
                        $('#view_data_admin').slideToggle("slow");
                    }

                    return false; });


        $( "#DelDataForm").button({ icons: { primary: "ui-icon-scissors" }});
                $( "#DelDataForm" ).click(function() {
                    $('#dialog-confirm-del').dialog('open');
                    return false; });

                /*abre popup de alerta de eliminar */
                arrayRemove.push("dialog-confirm-del");   
                $("#dialog-confirm-del").dialog({
            autoOpen: false,
            resizable: false,
            height:220,
            modal: true,
            buttons: {
                'Remove Stuff': function() {
                                        $('#sel_action_form').val('TypoDesClients_DelDef');
                                        $('#name').val('_____');
                                        $('#form_submit').submit();
                                        $(this).dialog('close');
                },
                Cancelar: function() {
                    $(this).dialog('close');

                }
            }
        });

                $( "#AcceptChanges").button({ icons: { primary: "ui-icon-check" }});
                $("#form_submeter").validator({ 
                    position: 'center right',
                    offset: [0, 0],
                    message: '<div><em /></div>'
                }).bind("onSuccess", function(e, els) {
                    var numSucceeded = els.length,
                        numExpected = $(this).data('validator').getInputs().length;

                    if (numSucceeded === numExpected) { 
                        if(!submited){submited=true;
                                    SubmitFormSV('form_submit', 'action/action_a.php');
                                    return false;
                                    }else return false;
                    }
                });

$( "#radio" ).buttonset();
$("#1_radio").click(function () { 
    $("#tr_1").show();
});
$("#2_radio").click(function () { 
    $("#tr_1").hide();
    });

});

local lib：

     function SubmitFormSV(formul, address)
     {       
             DoChecks();
        $("#loading").show("slow");
        $.post(baseURL + address, $('#' + formul).serialize(), function(html){
            $('#content').slideUp("slow", function () {
                AjaxChargePage(html, true);
            });
        });
        $("#loading").hide("slow");
        return false;
     }

接下来javascript的下一个类似于这个。

并且这项工作因为破坏没有： DoChecks（）如：

$.each(arrayRemove, function() {
    var element = arrayRemove.pop();
    $('#'+element).remove();
});

Answer 1

完成对话后1尝试...

$("#dialog-confirm-elimina").dialog("destroy");

或取消功能......

$(this).dialog("destroy");

.dialog命令在所选元素上创建一个新对话框。你这样做了两次，因而有问题。一旦创建了对话框，就可以使用open和close方法重用它，或者如上所示进行销毁，然后重新创建。

Answer 2

好的，最后我得到了一个让一切正常的解决方案。而不是使用

$("#dialog-confirm-elimina").dialog("destroy");

我用：

$("#dialog-confirm-elimina").remove();

我仍然不知道原因，但显然不再有问题了。

感谢您的回答。

PS：如果有人知道这怎么可能，我很感激地照亮了我。谢谢

ajax调用后问题的jquery对话框

2 个答案: