Jquery Delegate not binding to dynamically created element

Question

I am working on a Phonegap App that has dynamically created elements. The app can be seen here The Element is created when a user clicks on an accordion menu to reveal a choice of elements. Then the user can choose a new element to add to the layout by click in an image from the menu. The browser alerts that a new element will be inserted in a div that is labelled new element.

Here is the kicker, I am using a jQuery touch plugin to be able to drap the newly created elements on the screen. When the new element is created a class="touchMove" is added to the element. The issue is that I cannot seem to get the touch function to bind to the new element.

I have tried live(), delegate(), and on(). I can get a click event to bind and display an alert box on click but I cannot get the touch event to bind to the new element. I added the click for testing purposes. If I change it to "touch" I get nothing, perhaps because it is looking for the parameters to be defined for the function. IDK!

$('#newElement').delegate("img","click",function(){
                           // alert('I was clicked');
                            $(this).touch({
                                            animate: false,
                                            sticky: false,
                                            dragx: true,
                                            dragy: true,
                                            rotate: false,
                                            resort: true,
                                            scale: false
                                            });

                            });

Again, if I uncomment the alert function and comment out the touch function the alert works. If I comment out the alert and uncomment the touch function nothing happens.. During this process I see no errors.

There are three elements on the page that receive the touch function just fine on page load with this function

$('.touchMove').touch({
                           animate: false,
                           sticky: false,
                           dragx: true,
                           dragy: true,
                           rotate: false,
                           resort: true,
                           scale: false
                           });

The "#2 Touch Me :)" elements work fine. I am trying to add the class ("touchMove"that is working oK), and use that class to attach the touch function to the new element.

By the way, the touch functions only run on a device (Android, iPad) so if you view it in a actual computer browser the touch events will not work.

Any help with this matter will be appreciated.

Answer 1

Why not use

//start to touch
$("body").on("touchstart mousedown","#newElement",function(e){
    alert("you started to touch");
});

//moving
$("body").on("touchmove mousemove","#newElement",function(e){
    alert("you moved");
});

//finished touching
$("body").on("touchstop mouseup","#newElement",function(e){
    alert("you stopped touching");
});

You need the to use 'live' or 'on' as all events are bound when the document loads so any new events bound to an object added to the dom after initial load will either need to be contained within a callback or bound with jquery 'live' or 'on'.

you could also include the mouse events so functions also work when no touchscreen is available.