使用jquery在移动浏览器上重新绘制图表

Question

我使用dc.js 这里构建了两个图表。对于标题中的第二个图表，您可以看到带有两个选项的下拉列表。选择后，图表将使用新数据重新绘制。在桌面上工作很好。然而，在移动平台上什么都没有发生。我使用以下方法：

HTML:

<div id='Line_chart_rate'>
      <strong>Daily Price of a Dollar in </strong>
      <select class = 'line-drop'>
        <option id = 'RUB'>Rubles</option>
        <option id = 'CAD'>Canadian Dollars</option>
      </select>    
</div>

JS

// Events for the rate line chart dropdown menu
$('#CAD').on("click", function() {

    ... Update chart...

    return false;
})

$('#RUB').on("click", function() {

    ...Update Chart...

    return false;
    })

我四处寻找解决方案。在尝试了几种方法，包括不同的hack和Jquery的变体之后，使用了带有javascript函数的html标记，等等。

据我所知，问题是在移动上没有鼠标点击事件，而是点击和滑动事件。因此，我正在寻找一种方法来注册/捕捉鼠标单击事件，以便该图形在移动上更新。下面是完整的html文件和js文件，以防您想查看代码。jquery单击函数位于js文件的底部。谢谢你的帮助。

Answer 1

我完全忽略了你使用的处理程序的类型。如果你在移动，点击一个选项不会触发它的点击事件，看起来这也是桌面浏览器的情况。我设法用现有代码更改图形的唯一方法是手动触发控制台中的单击事件，这意味着侦听器的设置是正确的，但是浏览器在单击选项时不会触发该事件。尝试将HTML和JavaScript更改为以下内容。希望这两个片段能够在所有浏览器上工作。

HTML:

<select class="line-drop">
    <option value="RUB">Rubles</option>
    <option value="CAD">Canadian Dollars</option>
</select>  

JavaScript:

$('.line-drop').on("change", function() {
    if (this.value == "RUB") {
        //Update chart to show Rubles
    } else if (this.value == "CAD"){
        //Update chart to show Canadian Dollars
    }
});