jquery - 对话框 ui 中的复选框不可选中

Question

我正在尝试使用 jQuery UI 对话框解决 z-index 问题，类似于问题Can't select or deselect checkboxes inside jQuery UI Modal Dialog，知道那里有错误报告。

因此，在尝试按照建议提升 z-index 时，我添加了以下代码：

$('#interface').click(function(evform){
  $('#interface').prop('z-index')=99999;
});

其中 chrome 和 firefox console.log 状态：

未捕获的 ReferenceError：分配中的左侧无效

但是，尽管出现错误，该复选框现在可以工作（每次都抛出控制台错误）。如果我删除有问题的行，复选框将变为“不可点击”。我怎样才能正确编码呢？

我的 HTML：

<div id="dialog" title="Loading...">
    <p id="interface">Loading...</p>
</div>

（顺便说一句，我尝试在中添加内联样式<p>，但没有成功：

<p id="interface" style="z-index:99999">Loading...</p>

使用 AJAX，我将 '#interface' 的内容替换为有效的复选框 html，例如：

<label for="right">
  <input name="right" type="checkbox">
</label>

并且我包含了通常的 jQuery/Dialog UI 文件。

最后一点，我试图发挥创意，因为这不起作用并通过以下方式手动切换复选框：

if ($(evform.target).prop('type')=="checkbox"){
      $(evform.target).checked;
}

* 编辑更新 *

截至 2013 年 12 月 22 日（EDGE 预发布版）的 jQuery 核心，此错误已得到修复。我希望他们尽快发布稳定版本（我相信它会是 v1.10）！您可以在 jfiddle 中对其进行测试：http: //jsfiddle.net/tj_vantoll/XXGQA/

score 5 · Accepted Answer

您必须设置z-indexon #dialog，而不是#interface。

您的代码抛出错误，因为您试图为函数调用分配一个值。所以你的代码应该是：

$('#interface').click(function(evform){
  $('#dialog').css('z-index', 99999);
});

或者只是在你的 CSS 上：

#dialog { z-index: 99999; }

更新

这个解决方案不是万无一失的。为 jQueryUI 提交的错误报告指出，如果复选框z-index低于对话框下方的覆盖层，则会出现问题。jQueryUI 似乎以绝对方式比较 z-indexes，这违反了 CSS 标准（但可以理解，考虑到适当的比较可能会占用大量资源）。

因此，实际的解决方案可能取决于您在对话框中设置z-index（和）哪些元素。position为避免该错误，请勿z-index在对话框内使用，或设置一个保证高于（动态）分配给叠加层的值（因此，我的 99999建议）。

score 1 · Accepted Answer

$('#interface').click(function(evform){
  $('#interface').prop('z-index')=99999;
});

应该

$('#interface').click(function(evform){
  $('#interface').prop('z-index', 99999);
});

第二个参数（如果提供）将属性设置为其值。

score 1 · Accepted Answer

问题原来是return false;我在点击编码中遇到的问题：

$('#interface').click(function(evform){
  *** did stuff here ***

   evform.preventDefault;
   return false; //This is the offending line of code
});

为了诊断，我想看看页面上的 z-index 更高，所以我添加了：

$('*').each(function(){
    if ($(this).css('z-index')>99) { 
        console.log ($(this).css('z-index')+", " + $(this).prop('class'));
    }
});

这给了我所有 z-index 高于 99 的元素。事实证明，ui 对话框通常设置为 1001 或 1002，因此@bfavaretto 列出的“99999”已经足够高了。

仍然不知道为什么会return false;产生错误，但我希望下一次更新能解决这个问题。

3 回答 3