Question

我在运行时创建html，如下所示：

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

现在，我想在这个div上附上一些事件，比如onclick。我怎么能在下一行做到这一点？我稍后会将它添加到DOM中。

PS：我必须在不使用JQuery的情况下完成此任务。

Answer 1

您不想将div构建为字符串，而是要使用document.createElement('div')。通过这种方式，您将拥有一个真正的dom对象，并且可以获取并设置它的属性，包括onClick

Answer 2

首先尝试将div构建为DOM元素。

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;
}

addEventListener方法是标准的，但并不是每个浏览器都能使用标准版。

编辑：如上所述，必须首先将元素添加到DOM中。

Answer 3

这会有帮助吗？由于您动态生成它，因此您知道DIV的控件ID。

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

Answer 4

Brian Glaz完全正确但是，如果出于某种原因，你真的需要这样做，你有两个选择：

你只能使用纯javascript将事件添加到DOM中已有的内容中，因此你必须将它包含在html中：

document.body.innerHTML += myVar;

然后，使用

附加事件

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

使用jQuery，您可以使用.live（）将事件附加到DOM中尚不存在的元素：

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

所以你可以稍后添加div ......

Answer 5

或者您可以使用此技巧：将事件附加到document.body。然后，如果事件目标不是所需的div而不是什么都不做。它与jinery用于live函数的技术相同：

// 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

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

5 个答案:

这是demo。