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

【问题标题】：Touch events do not work when element appended to DOM after events binding在事件绑定后将元素附加到 DOM 时，触摸事件不起作用
【发布时间】：2012-08-01 09:16:20
【问题描述】：

当我在 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 并且必须在它发生之前构造它并添加事件。

那么，有人知道为什么会这样吗？有什么解决方法吗？谢谢。

【问题讨论】：

我遇到了同样的问题，但我可以稍后绑定事件。这对你来说不可能吗？怎么样？

标签： javascript android jquery ipad html

【解决方案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 :-('); });
        });

【讨论】：

是的，它可以工作，但不能解决问题。鼠标事件可以添加到 before 元素附加到 DOM 并且它们可以工作。我不知道元素何时会被附加到 DOM，但我必须将事件绑定到它。
但是你想要的是事件应该可以工作，所以为什么不将你的元素附加到容器中，然后绑定处理程序。
因为如果我删除它们然后重新添加 - 那么所有的触摸事件都会消失。
如果我明白你的意思，这应该发生。如果我从 DOM 中删除所有与触摸事件相关联的元素，那么没有元素将是具有触摸事件的 DOM。然后，如果我再次需要这种类型的元素，那么我必须创建元素并将事件处理程序附加到相同的元素。
我已经检查过了。对于触摸事件：create - bind - attach：不起作用； create - attach - bind 有效。但是对于鼠标事件：create - bind - attach：有效；虽然 create - attach - bind - remove - attach : 不起作用。所以看起来我应该总是在添加到 DOM 之后添加事件。谢谢你的帮助。