Question

I have the following jQuery code (I have changed names of div and functions, not going to make much difference)

$(function(){
    $('#div1').bind('touchend',function(){
        function1();
        function2();
    });
});

$(function(){
    $('#div2').bind('touchend',function(){
        function1();
        function3();
    });
});

This is the plain JS version of it, which doesn’t work.

document.getElementById('div1').addEventListener('touchend',function(){
    function1();
    function2();
},false);

document.getElementById('div2').addEventListener('touchend',function(){
    function1();
    function3();
},false);

If someone can explain what is the meaning of the jQuery version first, and then point out what mistake I made with the plain js version, I’ll be grateful!

[In case if you’re wondering why am I doing this, I need to remove jQuery from the phonegap app I’m building, so that the page loads faster :-)]

Answer 1

Your code should work in any browser/DOM that supports touch events. The only thing I can figure here is that you miss the DOMContentLoaded event to invoke and therefore, try to get/query elements which are not ready yet.

So you should wrap your code into

document.addEventListener('DOMContentLoaded', function () {
}, false);

jQuery automatically does this for you, when you invoke $(function() {});. If you pass a function into $() its a shortcut for $(document).ready(fnc)