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

我四处寻找解决方案。在尝试了几种方法后，包括 Jquery 移动设备的不同黑客和变体，使用 html 标签参考 javascript 功能等。我无法使任何工作正常进行。

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

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

Redraw chart on click on a mobile browser using jquery

javascript

mobile

jquery

jquery-mobile

dc.js