Question

我这里有问题。我有一个jquery模式对话框，我有2个单选按钮。在我的代码中，我有jQuery ajaxStart和ajaxStop处理程序来检查Ajax请求（我还有一个其他的jquery对话框弹出来显示正在执行Ajax请求时的Loading ...消息等）。当我选择每个单选按钮时，会发出ajax请求。我遇到的问题是，由于ajax事件（ajaxStart，ajaxStop），当我点击单选按钮时，它们没有被选中（虽然我得到了我的单选按钮的正确值）。知道可能导致这种情况的原因吗？

您可以通过此jsfiddle

查看我的例子

谢谢

Answer 1

问题似乎来自modal: true对话框的#ajax-dialog选项。如果将该选项设置为false，则按预期工作。升级到最新版本的jquery和jquery ui似乎无法解决问题。

解决方案1 

将模态选项设置为false。

$('#ajax-dialog').dialog({
    autoOpen: false,
    modal: false, // set to false
    title: 'Loading...'
});

<强> DEMO

解决方案2

您可以使用允许阻止整页或特定元素的插件BlockUI。它通过显示覆盖div（在页面或元素上）来禁止与底层内容的任何交互。您可以显示消息并自定义外观和感觉。

阻止对话框内容（使用单选框）：

$("#ajax-dialog").ajaxStart(function() {
    $('#gender-dialog').block({ 
            message: '<h1>Loading...</h1>', 
            css: { border: '3px solid #a00' } 
        }); 
});

$("#ajax-dialog").ajaxStop(function() {
    $('#gender-dialog').unblock(); 
});

<强> DEMO

屏蔽整页：

$("#ajax-dialog").ajaxStart(function() {
    $.blockUI({ message: '<h1>Loading...</h1>', baseZ: 2000 });  
});

$("#ajax-dialog").ajaxStop(function() {
    $.unblockUI();
});

在这种情况下请注意选项baseZ，这是叠加层的z索引，其默认值为1000.将其设置为高于对话框以覆盖它。

<强> DEMO

在ajax调用的jquery对话框中未选中单选按钮

1 个答案: