Hi.
How do I add a click event using addEventListener (window.onload) when the tags in question are being generated from the server (via an xmphttp request, no less)?
Thanks!
A:
You have to apply the event hanlders after the elements have been inserted into the DOM
Josh Stodola
2009-09-11 18:47:26
I'm sorry but this is not true. Why would elements need to be "inserted into the DOM" for event listeners to be attached?
kangax
2009-09-11 19:10:41
Because the DOM is what provides the events in the first place. Are you joking?
Josh Stodola
2009-09-11 19:30:29
Well, you can add handlers before document insertion, but obviously you have to create the elements before adding the handlers. If you are writing innerHTML straight into the document, the acts of creation and insertion are the same thing; not so if you're doing it with DOM methods.
bobince
2009-09-11 22:16:49
True, but what good are the handlers if there is no way for the user to invoke them?
Josh Stodola
2009-09-11 23:03:09
Josh, what does "DOM providing events" have to do with "attaching" listeners to an element? **Attaching a listener does NOT require element to be inserted into a document**. Or have we, perhaps, misunderstood each other?
kangax
2009-09-12 02:55:52
He has a string of HTML returned from the server. Explain to me how he will attach event handlers to a certain element within that string without inserting into the DOM. I can't even believe you are arguing with me about this.
Josh Stodola
2009-09-12 16:02:20
For example, by using `Range` and its `createContextualFragment` to convert string into a `DocumentFragement`. At that point, DocumentFragment **does not need to be in a document** (yet, string was converted into a fully functional DOM tree). **Then** you can do whatever you want with it, **including document injection**. But this is really irrelevant to my original reply to you. You said that **elements** need to be inserted into a DOM, not an HTML string. I corrected you by saying that elements do not need to be in a document in order to attach event listeners to them. Is it still unclear?
kangax
2009-09-12 19:18:04
It is very clear, it is just totally impractical. This argument is irrelevant; I am done with it. Go try to convince somebody else.
Josh Stodola
2009-09-14 13:09:12
A:
You can try to handle events for parent elements, which are available as DOM loaded, then get element related to event.
<ul id="list">
<li id="first">The first</li>
<li id="second">The second</li>
<li id="third">The third</li>
</ul>
document.getElementById('list').onclick(function(e){
o = e.originalTarget;
// if you click on second li o will bi the same as document.getElementById('first')
// even if li with id "first" is inserted to DOM after creating this event handler to "list"
// so here you can perform actions with it
// hope it will help
});
Mushex Antaranian
2009-09-11 20:11:55
A:
Thanks all.
I solved this by adding the below code to the "on success" event of the XMLHTTP request that populated the DOM with the elements coming from the server. That worked for me. Josh, you got my head moving in the right direction (although it would have been nice to see a code illustration) so I marked your response as the answer.
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
var m_sel=document.getElementById("fcat");
if (m_sel) {
var maxi = m_sel.options.length;
for( var i = 0; i < maxi; i++ )
{
var option = m_sel.options[i];
option.addEventListener( "click", toggleElem, true );
}
}
}
Code Sherpa
2009-09-14 00:32:01