Question

My problem is that I have to create event listeners on certain DOM elements before I insert them into the dom.

Now generally this is quite easy like so:

var button = $('<button>Click Me</button>');

button.on('click', function(){ alert('clicked'); });

$('body').append(button);

However, the problem is that I need to wrap the button in other html as in this example:

http://jsfiddle.net/a8xjJ/

The Event Listener breaks if I mix the button object with a string of html.
That’s when the Event Listener looses touch with the object, quite logically.

My problem is that I need to use strings of html, that’s a constraint of the project. Maybe there is a way in which I can use the dom selector on a string? Or maybe you can think of another way of making the above fiddle work.

Answer 1

If you started to work with objects, try not to use their string representation (it outputs the shell only but not the events and other data). One possible solution of you problem:

$("<button>Click Me</button>").on("click", function(e) {
    e.preventDefault();
    alert("Clicked");
}).wrap("<form><div></div></form>").closest("form").appendTo("div");

DEMO: http://jsfiddle.net/a8xjJ/2/