Question

I have an HTML image element as shown below:

var actionImage = $("<img></img>");
    actionImage.attr("id", getRandomString()); 
    actionImage.attr("width", "16").attr("height", "16").attr("src", "Action_normal.png");
    actionImage.attr("style", "cursor: hand;");
    actionImage.bind('mouseover', function() {
        OnMouseOver($(this).get(0));              
    });

When I clone this element I loose the mouseover event. How can I make sure that the events are also cloned.

Answer 1

Clone takes a boolean parameter that, when it’s true (which isn’t the default), conserves data and events. You want $actionImage.clone(true).

And as @Purmou mentions, you could also do this by binding your JS events via on or delegate, to avoid this very problem.