Question

我刚刚注意到在移动设备上，当调整大小到移动设备时，我的标签没有点击和更改，并且想知道是否有人能看到原因？

我在这里创建了一个小提琴：https://jsfiddle.net/a6k70p0L/2/

在桌面视图中正常工作，但在调整大小时，点击事件似乎会触发并发生变化。

JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div style="width: 600px; margin: 0 auto">
    <div id="container" style="height: 400px"></div>

    <button class="export" data-scale="1">Scale = 1</button>
    <button class="export" data-scale="2">Scale = 2</button>
</div>

Answer 1

将$('ul.tabs').each...包裹在功能中，并在移动设备中完成所有附加/ h6标记后调用该功能。或者在每个陈述之前调用你的追加函数。

每个语句都会触发并应用于DOM中当前可用的所有内容，因为您的附加函数尚未启动...每个语句都不知道它在那里。然后你的追加内容发生在你的移动函数中，并且每个语句都不知道它存在（因为它在移动函数之前被触发）。

编辑 - 工作答案

点击此处查看更新的小提琴：https://jsfiddle.net/a6k70p0L/6/

我在下面的评论中提到了我的更改。

Answer 2

当您将append()与onclick（）这样的事件一起使用时，您应该使用delegate() jQuery函数。

示例：

$("body").delegate('.class', 'click' ,function()
{
//do something
});

非常有帮助。您可以在Stackoverflow上的其他帖子中阅读此用法的原因。

jQuery标签不适用于移动设备 - 自定义代码

2 个答案: