我的 jquery 对话框在 Firefox 中无法正常工作,但 Firebug 没有给我任何错误。我的对话框在 Chrome 中运行良好。
情况: 我的页面上有几个 jquery 对话框,它们针对不同的事件打开。一个“添加新元素”对话框给了我一个问题。第一次打开对话框时效果很好。随后的任何时候,都无法单击或输入文本输入框。我认为我通过每次都销毁对话框来解决问题。然后每次打开它都会起作用。但是后来我发现如果打开了任何其他对话框,然后打开了这个“添加新元素”对话框,同样的事情又发生了:无法在框中输入。
我很困惑!!!!请,任何帮助将不胜感激......我已经盯着这段代码好几天了。
这是jquery对话框代码:
$(function() {
$( "#dialog-new-osc-el" ).dialog({
resizable: false,
autoOpen: false,
height:300,
width:400,
modal: true,
buttons: {
"Create": function() {
*create button function stuff here* then:
$(this).dialog("destroy");
$( this ).dialog( "close" );
create_new_osc_el_dialog();
},
Cancel: function() {
$(this).dialog("destroy");
$( this ).dialog( "close" );
create_new_osc_el_dialog();
}
},
close: function() {
$(this).dialog("destroy");
$( this ).dialog( "close" );
create_new_osc_el_dialog();
}
});
});
单击“添加新元素” div 时会打开对话框 - 该 div 具有 onclick 功能:
<div class="addnewbox" onclick="addneweltoosc();">
这个 onclick 函数看起来像这样(为简洁起见,删除了一些代码):
function addneweltoosc(){
$( "#dialog-new-osc-el" ).dialog( "open" );
}
对话框的实际 HTML 很长,这里是重要的东西:
<div id="dialog-new-osc-el" title="Create Element">
<div id="new_osc_el_type" class="pointer">
<ul>
<li onclick="new_osc_el_type_chosen('Branch');">Branch</li>
<li onclick="new_osc_el_type_chosen('Group');">Group</li>
<li onclick="new_osc_el_type_chosen('Division');">Division</li>
<li onclick="new_osc_el_type_chosen('Unit');">Unit</li>
<li onclick="new_osc_el_type_chosen('Strike Team');">Strike Team</li>
<li onclick="new_osc_el_type_chosen('Task Force');">Task Force</li>
<li onclick="new_osc_el_type_chosen('Individual Resource');">Individual Resource</li>
</ul>
</div>
<p><input class="hide" type="text" id="new_osc_el_pos_name" />
</div>
该对话框首先为用户提供一个可供选择的列表。当用户单击列表项时,调用 new_osc_el_type_chosen 函数。此函数隐藏该列表并显示“new_osc_el_pos_name”文本输入。这是对话框第一次打开时起作用的输入框,但之后就不行了。这是代码:
function new_osc_el_type_chosen(a)
{
$("#new_osc_el_type").addClass("hide");
$("#new_osc_el_pos_name").removeClass("hide");
if (a=="Branch")
{
$("#new_osc_el_pos_name").val("NAME of Branch Director");
}
document.getElementById("new_osc_el_pos_name").setSelectionRange(0,7);
$("#new_osc_el_pos_name").focus();
}
解决了!
显然,所有模态对话框都导致了它们之间的冲突……或者其他什么。实际上,我不是 100% 确定为什么 - 但是将 modal:true 更改为 modal:false 解决了我的问题。