使用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 更改为以下内容。这两个 sn-ps 应该可以在所有浏览器上运行。

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
    }
});