javascript - 使用 jquery 在移动浏览器上点击重绘图表

Question

我使用 dc.js 构建了两个图表 here 。对于标题中的第二个图表，您可以看到一个包含两个选项的下拉列表。选择任一选项后，图表将使用新数据重新绘制。在桌面上运行良好。然而，在移动设备上什么也没有发生。我使用以下方法:

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 mobile 的变体、使用 html 标签引用 javascript 函数等，我无法使任何工作发挥作用。

据我了解，问题在于移动设备上没有鼠标单击事件，而是点击和滑动事件。因此，我正在寻找一种方法来注册/捕获鼠标单击事件，以便图表在移动设备上更新。这是完整的html file和 js file如果您想查看代码。 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
    }
});