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.

1
  • I'm having the same problem, but I can just bind the event later. Is this not possible for you? How so?
    – Zut
    Oct 16, 2012 at 12:26

1 Answer 1

1

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 :-('); });
        });
5
  • Yes it works but not solves the problem. Mouse events can be added before element appended to DOM and they works. I dont know when element will be appended to DOM, but i must bind events to it.
    – Dvoyni
    Aug 1, 2012 at 9:26
  • But what you want is the event should work, so why not you append your element in the container and then bind the handlers.
    – ankur
    Aug 1, 2012 at 9:47
  • Because if i remove them and then add back - then all the touch events will go away.
    – Dvoyni
    Aug 1, 2012 at 9:50
  • If I am getting your point clearly this should happen. If I remove all the element that have touch event associated with from DOM, Then no element will be DOM with touch events. Then If i need such type of elements again then I have to create the elements and attach event handler to same.
    – ankur
    Aug 1, 2012 at 9:56
  • I've checked it. for touch event: create - bind - attach : does not work; create - attach - bind works. But for mouse event: create - bind - attach : works; though create - attach - bind - remove - attach : does not work. So it looks like i should always add events after adding to DOM. Thank you for help.
    – Dvoyni
    Aug 1, 2012 at 10:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.