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

Question

我这里有个问题。我有一个 jquery 模式对话框，上面有 2 个单选按钮。在我的代码中，我有 jQuery ajaxStart 和 ajaxStop 处理程序来检查 Ajax 请求(我还有一个弹出的其他 jquery 对话框来显示正在加载...消息或执行 Ajax 请求时的其他内容)。当我选择每个单选按钮时，会发出一个 ajax 请求。我遇到的问题是，由于 ajax 事件(ajaxStart、ajaxStop)，当我单击单选按钮时，它们未被选中(尽管我获得了单选按钮的正确值)。知道是什么原因造成的吗？

你可以看到我用这个 jsfiddle 表达的意思

谢谢

Answer 1

看来问题出在 #ajax-dialog 对话框的 modal: true 选项。如果将选项设置为 false，它将按预期工作。升级到最新版本的 jquery 和 jquery ui 似乎并没有解决问题。

---

解决方案一

将模态选项设置为 false。

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

DEMO

---

方案二

您可以使用插件 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-index，默认值为 1000。将其设置为高于对话框的值以覆盖它。

DEMO