touchstart event stops working after scroll

Question

I have attached a touchstart event to my fixed positioned footer in a web-app

so the structure is like this:

<div id="content">i am a looong content.</div>
<div id="footer">i am tappable!</div>

and the code like this:

$("#footer").on('touchstart', function(e) { alert("tapped"); });

The problem is that when I scroll down the page to read the (long) content, the touchstart event for my footer just stops working! it does not get called anymore.

Does anyone have any idea why this might be happening? Thanks in advance.

Answer 1

May I suggest to use click instead, that way it will be call each time.

var idFooter = document.getElementById("footer");
idFooter.addEventListener("click", touched, false);

function touched(){
 alert("tapped");
}

Instead of user on did you try to use bind?

You may also use touchend to see it that way it work better.