Home/ Questions/Q 8310515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T19:29:12+00:00

When I create a div in HTML code ant then bind touch event on

  • 0

When I create a div in HTML code ant then bind touch event on it – everythig going perfect. But when I create div like that: $('<div ...></div>') then binded touch events wont work. Same behaviour are on iPad and Android devices.

Here is a code to reproduce an issue:

<!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>

Example at jsfiddle: http://jsfiddle.net/EqJDA/11/

I was searching around and noticed that if you bind any mouse event and touch event on same element then touch event will be ignored. I’ve thought that jQuery added some hidden mouse events and listed all them for the div “b” but there was only one touch event.

UPDATE: if events binded after element appended to DOM – everythig works good. But I cant predict when element will be appended to DOM and must construct it and add events before it happens.

So, does anyone know why this happens? Is there any workarounds?
Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    what i think after going through your code is you have not appended the element in the DOM. So the event is not getting registered.

    try this.

    $(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 :-('); });
        });
    • 0