jquery对话框位置受hide / show动作严重影响

Question

以下代码拦截对radiobutton集的单击，警告该更改是否会导致数据删除，然后隐藏子表单并显示另一个子表单。所有操作都会发生，但对话框的位置会受到隐藏和显示各种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显示一个对话框。但与此同时，调用函数已经完成了隐藏/显示操作。如果用户单击“继续”，则对话框将消失。如果用户单击“取消”，对话框将重置单选按钮组并再次触发原始功能。

对于不受隐藏/显示操作影响的对话框位置，这些操作必须在对话框关闭后发生。我能确保发生这种情况的唯一方法是将hide / show calls 置于对话框按钮中，如下所示：

// 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
                       };
        });
 });

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