Как я могу прикрепить событие к тегу в виде строки?

Question

Я создаю HTML во время выполнения, как это:

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

Теперь я хочу прикрепить какое-то событие, скажем, по клику, к этому div. Как я могу сделать это на следующей строке? Я добавлю это в DOM позже.

PS: я должен выполнить это без использования JQuery.

Answer 1

Поможет ли это? Поскольку вы генерируете его динамически, вы знаете контрольный идентификатор DIV.

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

Answer 2

Вместо построения вашего div в виде строки, вы захотите использовать document.createElement ('div') . Таким образом, у вас будет настоящий дом-объект, и вы сможете получить и установить его свойства, включая onClick

Answer 3

Попробуйте сначала создать 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 4

Или вы можете использовать эту технику: прикрепить событие к document.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

Вот демо .

Answer 5

Брайан Глэйс совершенно прав, но, если по какой-то причине вам действительно нужно сделать это таким образом, у вас есть два варианта:

, вы можете добавлять события только к тому, что уже есть в DOM, используячистый javascript, поэтому вам нужно будет включить его в 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 позже ...