jquery 对话框位置受到隐藏/显示操作的严重影响

Question

以下代码拦截对单选按钮集的单击，警告更改是否会导致数据删除，然后隐藏一个子窗体并显示另一个子窗体。所有操作都会发生，但对话框的位置会受到各个 div 的隐藏和显示的不利影响。此效果根据首先按下的单选按钮而有所不同。第一次单击“重用”按钮时，会导致对话框显示在页面之外。

如果我关闭隐藏/显示，对话框位置就可以了。

我该如何解决这个问题？

$(document).ready(function() {
$("input[name='provenance']").ready(function(){ 
        var v=$("input[name='provenance']:checked").val();
        $('div#prov_container div.optcol2').not('#'+v).hide();
        $('#'+v).show(); 
    });

    // toggle hide/show of provenance field
    $("input[name='provenance']").live("click", function(){
        v=$(this).val();
        provwarning(v); //intercept choice and check for conflicts
        v=$(this).val();//may have changed due to provwarning

        $('div#prov_container div.optcol2').not('#'+v).hide();//AFFECTS dialog POSITION

        $('#'+v).show();//AFFECTS dialog POSITION

    });

     //determine if user choice will clobber existing data
     //warn user
     //continue or revert user choice to previous value
    provwarning=function(changingto){
        c= $('input[name="cross_id"]').val()? 'Cross': false; 
        d=$('input#del_id').val()? 'Delivery':false;
        r=$('input#reuse_id').val()? 'Reuse': false;
        prov_was= c||d||r;
        if(!prov_was)return; //prov_was is 'Unknown', so there is no conflict
        if(prov_was==changingto) return; //no change, so no worries

        cw=(changingto=='Provenance')? 'unknown' : (changingto=='Delivery') ? 'delivered' : (changingto=='Reuse') ? 'reused' : 'bred onsite';
        ww=(prov_was=='Provenance')? 'unknown' : (prov_was=='Delivery') ? 'delivered' : (prov_was=='Reuse') ? 'reused' : 'bred onsite';
        msg="If you change the provenance to '"+cw+"' the current provenance, '"+ ww +"', will be deleted.";

        m='<div id="modalpop">'+msg+'</div>'; 
        $(m).dialog({
            resizable: false,
            modal: true,
            title: 'Conflict with current Provenance',
            buttons: {
                "Continue": function() {
                    $(this).dialog('close');
                },
                "Cancel": function() {
                    var $radio = $('input[name="provenance"]');
                    $radio
                        .removeAttr("checked")
                        .filter('[value="' + prov_was + '"]')
                        .prop("checked", true)
                        .click();

                    $(this).dialog('close');
                }
            }
        });
    };
});

Answer 1

答案似乎在于事件的顺序。在原始代码中，provwarning 函数是从函数内部调用的。 provwarning 显示一个对话框。但与此同时，调用函数已经完成了隐藏/显示操作。如果用户单击“继续”，该对话框就会消失。如果用户单击“取消”，对话框将重置单选按钮集并再次触发原始功能。

为了使对话框位置不受隐藏/显示操作的影响，这些操作必须在对话框关闭之后发生。我可以确保这种情况发生的唯一方法是将隐藏/显示调用放入对话框按钮功能内，如下所示：

// toggle hide/show of provenance field
$("input[name='provenance']").live("click", function(){
        changingto=$(this).val();

        c= $('input[name="cross_id"]').val()? 'Cross': false; 
        d=$('input#del_id').val()? 'Delivery':false;
        r=$('input#reuse_id').val()? 'Reuse': false;
        prov_was= c||d||r;
        if(prov_was==changingto) return; //no change, so no worries
        if(!prov_was) {
           $('#'+changingto).show().siblings('.optcol2').hide();
           return; //prov_was is 'Unknown', so there is no conflict
        }

        cw=(changingto=='Provenance')? 'unknown' : (changingto=='Delivery') ? 'delivered' : (changingto=='Reuse') ? 'reused' : 'bred onsite';
        ww=(prov_was=='Provenance')? 'unknown' : (prov_was=='Delivery') ? 'delivered' : (prov_was=='Reuse') ? 'reused' : 'bred onsite';
        msg="If you change the provenance to <strong>'"+cw+"'</strong> the current provenance, <strong>'"+ ww +"'</strong>, will be deleted.";


        m=modalpop(msg); //make or reuse a div to show the dialog
        $(m).dialog({
            resizable: false,
            modal: true,
            title: 'Conflict with current Provenance',
            buttons: {
               'Continue': function() {
                           $(this).dialog('close');
                           $('#'+changingto).show().siblings('.optcol2').hide(); //hide-show IN BUTTON
                        },

               'Cancel': function() {
                            var $radio = $('input[name="provenance"]');
                            $radio
                                .removeAttr("checked")
                                .filter('[value="' + prov_was + '"]')
                                .prop("checked", true);
                            $(this).dialog('close');
                            $('#'+prov_was).show().siblings('.optcol2').hide();//hide-show IN BUTTON
                       };
        });
 });

我希望我知道为什么原始代码不等待对话框完成之前应用隐藏显示。