Question

I am trying to dynamically append some objects to a div and then programatically trigger a click event of the first image when they have all been created. The following code works and does this successfully in Firefox on a PC but when I test it on an iPhone I get the following error in the developer window –

TypeError:Result of expression ‘document.getElementById(“image0”).click [undefined] is not a function

Here is my code –

function processData(data) {        
$.each(data, function(i) {               
    $('<div>').append($('<img>').attr('src', '').attr('id','image'+i)).data('large', this[0]).appendTo('#gallery');
});
$('#gallery div').touchGallery({
    getSource: function() {
    var f = $(this).data('large');
    return f;
}
});
document.getElementById("image0").addEventListener('click', function(){},false);    
document.getElementById("image0").click();  
}

Like I say this works fine with Firefox. I am guessing that perhaps there is a different way to trigger click events on touch devices? Or is this event possible? I am using TouchGallery to display a slideshow of images and instead of showing the gallery of images and requiring users to click to start the slideshow I would like to automatically start it.

Any leads?

Answer 1

Why aren’t you using jQuery for the click-event-binding?

I think the error is that javascript doesn’t know the .click() you are using (even though firefox apparantly does support this).

$("#image0").click(function(){}); should do the trick.

(Or, since you are adding images in the gallery div after the DOM’s loaded: use $("#gallery").delegate("img", "click", function(event){});)