Question

我有一个小应用程序已禁用需要升级才能启用的选项。当用户单击以设置选项时，将显示一个div，为其提供升级说明。它在Firefox和Chrome中运行良好（尚未测试Opera或Safari），但它在I.E.中不起作用。（任何版本）。

在我已经完成的测试中，好像javascript正常工作，但是如果你直接点击输入元素，脚本就不会运行了。如果单击元素外部（在本例中为单选按钮），则可以正常工作。带有一类隐藏输入的div应该显示在顶部，但好像它显示在它周围。我对z-index所做的一切似乎都没有用，包括来自http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/的修复我猜其他人已经遇到过这个问题，但我不确定它是如何修复的。以下是html和javascript供参考。

<div style="display:inline-block; position:relative;">
    <input type="radio" class="radio" id="wcmenucart[cart_icon][1]" name="wcmenucart[cart_icon]" value="1" disabled="" />
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;" class="hidden-input-icon">
    </div>
</div>
<span style="display:none;" class="pro-icon"><i> Available in the <a href="#">Pro Version</a></i></span>

Javascript - 似乎工作正常，但以防万一......

<script type="text/javascript">
    jQuery('.hidden-input-icon').click(function() {
        jQuery('.pro-icon').show('slow');
    });
</script>

CSS：

.hidden-input-icon 或 .pro-icon 都没有css样式。 .pro-icon div包含style="display:none;"， .hidden-input-icon div包含style="position:absolute; left:0; right:0; top:0; bottom:0;"

修改

我的代码有一个小提琴here.希望这有助于揭示情况。

Answer 1

我不相信你在这里遇到z-index问题。我相信您通过禁用元素传播事件时遇到问题。 FF和Chrome显然会将链上的click事件传播到下一个元素，但IE不会。 This SO post处理类似问题，但使用FF。他们的解决方案在IE中也失败了，但值得查看该帖子以查看更多详细信息。

Here is a solution至少在Chrome和IE中有效。这是你的小提琴updated使用这个解决方案。

代码与上面的解决方案非常相似，我只更改了第17行中的“parent”元素和第39行中的实际单击函数。我还删除了原始的单击处理程序。我为小提琴添加了另一个单选按钮，以便您可以看到我的解决方案不应该干扰现有的“非禁用”元素。

不能将div放在收音机顶部.E

1 个答案: