当元素在事件绑定后附加到DOM时，触摸事件不起作用

Touch events do not work when element appended to DOM after events binding

本文关键字：事件 DOM 触摸 不起作用 元素 绑定      更新时间：2024-06-03

当我在HTML代码中创建一个div时，ant会在上面绑定触摸事件，一切都会变得完美。但当我创建这样的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的元素之后，那么everythig运行良好。但我无法预测元素何时会被附加到DOM，必须在它发生之前构造它并添加事件。

那么，有人知道为什么会发生这种情况吗？有什么变通办法吗？谢谢

在阅读代码后，我认为您没有在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 :-('); });
        });
相关文章：