使用 jQuery 时，边缘中的 <option> 上没有单击事件

Question

刚刚发现单击选择选项时，MS Edge 中没有触发单击事件。

这是使用 jQuery 1.9.1 的代码：

// data-hide - hide element in data-hide attribute onClick
    $("[data-hide]").bind("click", function(e) {
        $($(this).data("hide")).hide(0);
    });
    // data-show - show element in data-show attribute onClick
    $("[data-show]").bind("click", function(e) {
        $($(this).data("show")).show(0);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="mySelect">
<option value="" data-hide="#d1,#d2,#d3"></option>
<option value="1" data-show="#d1,#d3" data-hide="#d2">1</option>
<option value="2" data-show="#d3" data-hide="#d1,#d2">2</option>
<option value="3" data-show="#d2" data-hide="#d1,#d3">3</option>
</select>
<div id="d1" style="display: none;">
<p>
d1
</p>
</div>
<div id="d2" style="display: none;">
<p>
d2
</p>
</div>
<div id="d3" style="display: none;">
<p>
d3
</p>
</div>

还有其他人遇到这个问题吗？ 请问有什么解决边缘问题的方法吗？

MS Edge 是最新版本。在运行 Win 11 Pro 的多台计算机上进行了测试。 在 Firefox 和 Firefox Developer Edition 中一切正常。

Answer 1

我测试了您提供的代码，我发现绑定事件不适用于

select:option

元素，您可以将选择器修改为

select

。这应该可行，这是我的测试：

// data-hide - hide element in data-hide attribute onClick
$("select").bind("click", function (e) {
   $($("option:selected").data("hide")).hide(0);
});

// data-show - show element in data-show attribute onClick
$("select").bind("click", function (e) {
   $($("option:selected").data("show")).show(0);
});

其次，可以使用select Change事件，我觉得这样比较方便（不需要绑定两次）：

$("select").change(function () {
   $($("option:selected").data('hide')).hide();
   $($("option:selected").data('show')).show();
});