0

当我在 HTML 代码中创建一个 div 时，然后在其上绑定触摸事件 - 一切都很完美。但是当我像这样创建 div 时：$('<div ...></div>')然后绑定的触摸事件将不起作用。iPad 和 Android 设备上的行为相同。

这是重现问题的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="libs/jquery-1.7.2.js"></script>
    <script language="JavaScript">
        $(function() {
            $('#a').bind('touchstart', function(e) { alert('It works!'); });

            var b = $('<div style="width:100px; height:100px; background-color:red;" id="b" ></div>');
            b.bind('touchstart', function(e) { alert('Does not work :-('); });
            $('body').append(b);
        });
    </script>
</head>
<body>
    <div style="width:100px; height:100px; background-color:green;" id="a" ></div>​
</body>

jsfiddle 的示例：http: //jsfiddle.net/EqJDA/11/

我四处寻找，发现如果你在同一个元素上绑定任何鼠标事件和触摸事件，那么触摸事件将被忽略。我认为 jQuery 添加了一些隐藏的鼠标事件并为 div "b" 列出了所有这些事件，但只有一个触摸事件。

更新：如果在附加到 DOM 的元素之后绑定事件 - 一切都很好。但是我无法预测元素何时会被附加到 DOM 并且必须在它发生之前构造它并添加事件。

那么，有谁知道为什么会发生这种情况？有什么解决方法吗？谢谢。

4

1 回答 1

1

在浏览完您的代码后，我认为您没有在 DOM 中附加元素。所以该事件没有被注册。

试试这个。

$(function() {
            $('#a').bind('touchstart', function(e) { alert('It works!'); });

            var b = $('<div style="width:100px; height:100px; background-color:red;" id="b" ></div>');

            $('body').append(b);
b.bind('touchstart', function(e) { alert('Does not work :-('); });
        });
于 2012-08-01T09:23:44.667 回答