基于 JQuery 的选择菜单上的 D3 和 JQuery 单击事件冲突

Question

我正在使用华莱士·埃里克的代码笔进行基于 JQuery 的选择菜单，它似乎与 D3 点击事件冲突。

https://codepen.io/wallaceerick/pen/ctsCz

我正在使用的 D3 代码行如下：

d3.select("select").on("change", function(){...});

编辑：我包含一个代码笔，它显示了D3功能与注释掉的JQuery代码一起使用。当您从下拉列表中选择动物时，它下面的句子会更新。当您取消注释掉 JQuery 代码时，选择菜单的样式现在已正确，但句子不再更新。

https://codepen.io/rmmasri/pen/xqvmKd

谢谢！

Answer 1

你从第一个代码笔使用的JavaScript正在禁用原始select，并将其替换为div和ul，它们一起操作一些类似select的行为。

打开元素检查器会确认这一点，显示 DOM 如下所示：

<div class="select">
    <select class="select-hidden" id="animal">
        <option disabled="" selected="" value="hide">Animal</option>
        <option value="all animals">[All]</option>
        <option value="chickens">Chickens</option>
        <option value="wolves">Wolves</option>
    </select>
    <div class="select-styled">Chickens</div>
    <ul class="select-options" style="display: none;">
        <li rel="hide">Animal</li>
        <li rel="all animals">[All]</li>
        <li rel="chickens">Chickens</li>
        <li rel="wolves">Wolves</li>
    </ul>
</div>

您的d3.select('select')正在正确捕获select，但永远不会触发change事件，因为select永远不会更改。相反，您可以将 change 事件连接到 div#select-styled 元素，或者您可以更新 Wallace Erick 的 JavaScript，以便在更新div#styled-select时更新禁用的隐藏select。