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

我使用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>

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

$('.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
    }
});

我四处寻找解决办法。在尝试了几种方法之后，包括jquerymobile的不同黑客和变体，使用html标记引用javascript函数等等，我无法让任何东西正常工作

---

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

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

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>

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

$('.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
    }
});

---

忘记推送没有该代码的最新提交。这是一次使用JQuery移动黑客的尝试。如果它仍然不起作用，请告诉我。我将答案更改为一个全新的解决方案，希望该解决方案能够使图形在所有浏览器上完全按照预期工作。关于我改变了什么以及为什么改变的细节，请参见答案。我明白了。我按照你的建议更改了代码。让我知道它是否适合你。请问您使用的是什么浏览器？谢谢。我在桌面上用谷歌Chrome44.0.2388.0和iPhone上的Mobile Safari进行了测试，现在代码正常了。每次选择新选项时，图表都会发生变化。太好了。我的手机也能用。谢谢