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" にリストしたと思っていましたが、タッチ イベントは 1 つしかありませんでした。

更新:要素が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 に答える