如何将事件附加到字符串形式的标签上？

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

Instead of building your div as a string, you'll want to use document.createElement('div') . This way you will have a real dom object, and can get and set it's propeties, including onClick

Answer 2

Try building the div as a DOM element first.

var myVar = document.createElement("div"),
    parentDiv = document.getElementById("parent_div");

parentDiv.appendChild(myVar);
myVar.innerHTML = "some clickable text";
if(myVar.addEventListener){
    myVar.addEventListener("click", clickFn, false);
}
else if(myVar.attachEvent){
    myVar.attachEvent("onclick", clickFn);
}
else{
    myVar.onclick = clickFn;
}

The addEventListener method is standard, but not every browser plays nice with the standard.

EDIT: As mentioned, an element must be added to the DOM first.

Answer 3

Will this help? Since you dynamically generate it, you know the control id of the DIV.

document.getElementbyId('abc').onClick = foo;
function foo()
{
alert("All your impl to go here");
}

Answer 4

Brian Glaz is totally right but, if for some reason, you really need to do it this way, you have two options:

you can only add events to something that is already in the DOM, using pure javascript, so you would have to include it in the html like:

document.body.innerHTML += myVar;

and then, attach the event with

document.getElementById('abc').addEventListener('click', function(e){
   //your code
}, 1);

With jQuery, you could use .live() to attach events to elements that are not yet present in the DOM:

 $('#abc').live('click', function(e){
    //your code here
 });

so you could add the div later...

Answer 5

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 .