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

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

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

var myVar=“一些可点击的文本”

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

---

PS：我必须在不使用JQuery的情况下完成这项工作。

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…

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…

而不是将div构建为字符串，您需要使用。这样，您将拥有一个真正的dom对象，并可以获取和设置它的属性，包括

onClick

，而不是将div构建为字符串，您将希望使用。这样，您将拥有一个真正的dom对象，并且可以获取和设置它的属性，包括

onClick

首先尝试将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。

首先尝试将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中。

这会有帮助吗？由于是动态生成的，所以您知道DIV的控件id

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

---

这有用吗？由于是动态生成的，所以您知道DIV的控件id

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

---

或者您可以使用以下技术：将事件附加到

文档.body

。然后，如果事件目标不是所需的div，那么就什么都不做。这与jquery在其

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

//交叉浏览器事件附件函数
函数侦听（evnt、elem、func）{
if（元素addEventListener）{
元素addEventListener（evnt、func、false）；
}
else if（附件要素）{
var r=元件附件（“on”+evnt，func）；
返回r；
}
else window.alert（'对不起，戴夫，恐怕我不能那样做'）；
}
//这是jquery.live的一个模拟
var assignLiveEvent=函数（id、evnt、回调）{
变量处理程序=函数（e）{
e=e | | window.event；
e、 target=e.target | | e.src元素；
if（e.target.id==id）{
//你的代码在这里
撤回（e）；
}
};
侦听（evnt、document.body、handler）；
};
var myVar=“一些可点击的文本”；
assignLiveEvent（“abc”，“单击”，函数（e）{
//你的代码在这里
});
//现在，即使在事件处理程序分配之后，也可以将div添加到DOM中

---

以下是。或者您可以使用此技术：将事件附加到

文档.body

。然后，如果事件目标不是所需的div，那么就什么都不做。这与jquery在其

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

//交叉浏览器事件附件函数
函数侦听（evnt、elem、func）{
if（元素addEventListener）{
元素addEventListener（evnt、func、false）；
}
else if（附件要素）{
var r=元件附件（“on”+evnt，func）；
返回r；
}
else window.alert（'对不起，戴夫，恐怕我不能那样做'）；
}
//这是jquery.live的一个模拟
var assignLiveEvent=函数（id、evnt、回调）{
变量处理程序=函数（e）{
e=e | | window.event；
e、 target=e.target | | e.src元素；
if（e.target.id==id）{
//你的代码在这里
撤回（e）；
}
};
侦听（evnt、document.body、handler）；
};
var myVar=“一些可点击的文本”；
assignLiveEvent（“abc”，“单击”，函数（e）{
//你的代码在这里
});
//现在，即使在事件处理程序分配之后，也可以将div添加到DOM中

---

这里是。您需要将其添加到dom中，然后才能将事件附加到其中。除非在文本中添加onclick属性。在创建dom对象之前，这仍然只是一段文本。您需要将其添加到dom中，然后才能将事件附加到其中。除非在文本中添加onclick属性。在创建dom对象之前，这仍然只是一段文本。请在为onClick添加属性之前声明函数。答案是不完整函数声明可以按所示顺序引用，但答案确实不完整，因为它没有显示如何创建任何元素。请在为onClick赋值之前声明函数。答案是不完整函数声明可以按所示顺序引用，但答案确实不完整，因为它没有显示如何创建任何元素。

document.body.innerHTML+=myVar

非常具有破坏性，因为它会破坏整个DOM，然后用新内容重新构建它。还有其他方法可以从HTML标记字符串中构建新元素。”但是，如果出于某种原因，您确实需要这样做，那么您有两个选择：“。。。我使用body作为一个容器，因为我没有更多的引用……”“你必须像…

document.body.innerHTML…

”那样将它包含在html中。如果你建议jQuery是唯一的其他选项，那就更糟了，我保证它们不会做

innerHTML+=…

。live不是被弃用了吗？我想用“on”