Question

How to make touch event work on single element of each created by this function. This code doesn’t work since it makes all of the ‘#demo-1 p’ background-color change together even I touch one of them.

function token1(r) {
    for (var j = 0; j < r.length; j++) {
        if (r[j].match(srr[0], "g")) {
            $('<p>').html(r[j]).appendTo("#demo-1");
            scnt++;     
            $('#demo-1 p').bind("touchstart", function (event) {
                $('#demo-1 p').css('background-color', 'red')
            });
            $('#demo-1 p').bind("touchmove", function (event) {
                $('#demo-1 p').css('background-color', 'white')
            });
            $('#demo-1 p').bind("touchend", function (event) {
                $('#demo-1 p').css('background-color', 'white')
            });
        } 
    } 
}

Answer 1

Did you try the jQuery.on()?
It’s really easy to use:

$( '#demo' ).on('touchstart', 'p', function(){
    $(this).css('background-color', 'red');
});
...

Note: This should only be executed once. So put it outside the for loop (before or after).