Question

I’m creating html on runtime like this:

var myVar = "<div id='abc'>some clickable text</div>"

Now, I want to attach some event, say onclick, to this div. How can I do that on next line? I’ll add this to DOM later.

PS: I’ve to accomplish this without using JQuery.

Answer 1

Or you can use this technique: attach event to the document.body. Then if the event target is not the needed div than just do nothing. It is the same techinque jquery uses for its live function:

// crossbrowser event attachment function
function listen(evnt, elem, func) {
    if (elem.addEventListener) {
        elem.addEventListener(evnt, func, false);
    }
    else if (elem.attachEvent) {
        var r = elem.attachEvent("on" + evnt, func);
        return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// this is an analog of the jquery.live
var assignLiveEvent = function(id, evnt, callback) {
    var handler = function(e) {
        e = e || window.event;
        e.target = e.target || e.srcElement;

        if (e.target.id == id) {
            //your code here
            callback(e);
        }
    };

    listen(evnt, document.body, handler);
};

var myVar = "<div id='abc'>some clickable text</div>";

assignLiveEvent("abc", "click", function(e) {
    //your code here
});

// now you can add your div to DOM even after event handler assignation

Here is demo.