在基於JQuery的選擇菜單上發生衝突的D3和JQuery點擊事件

-1

我正在使用Wallace Erick的codepen用於基於JQuery的選擇菜單，並且它似乎與D3點擊事件相沖突。在基於JQuery的選擇菜單上發生衝突的D3和JQuery點擊事件

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

的我使用的代碼D3線如下：

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

編輯：我有一個codepen包括這表明D3的功能與註釋掉jQuery代碼工作。當你從下拉列表中選擇一個動物時，它下面的句子會更新。當您取消註釋JQuery代碼時，選擇菜單現在已正確設置樣式，但句子不再更新。

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

謝謝！

來源

2017-04-10 Rania M Masri

你能提供你使用這個自定義選擇菜單的代碼嗎？查看你的問題的[創建最小，完整，可驗證示例的指南]（https://stackoverflow.com/help/mcve）。 –

Codepen添加了！謝謝。 –

中的JavaScript你從第一codepen使用被禁用的原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。

來源

2017-04-10 16:47:11

謝謝！我沒有注意到他的代碼禁用了原始選擇。我將D3事件處理程序設置爲： d3.selectAll（「ul.select-options> li」） .on（「click」，updateAnimal）; 並更新了函數中的變量： var selector = d3.select（「div.select-styled」）; var selectedValue = selector.text（）; ...它的工作原理！ –

在基於JQuery的選擇菜單上發生衝突的D3和JQuery點擊事件

回答

相關問題