Events on dynamically generated elements in IE

H

Harlan Messinger

I'm using Javascript to insert an HTML element like

<input type="text" name="mytext" id="mytext" value="" onblur="alert('x');">

In both IE7 and Firefox 3, the input field appears, and I can type into
it, but when I tab out of it to the next field, the alert only happens
in Firefox.

Is the problem that IE doesn't bind events for dynamically generated
elements? Is there a way make this happen?
 
J

Johannes Hafner

Harlan said:
I'm using Javascript to insert an HTML element like

<input type="text" name="mytext" id="mytext" value="" onblur="alert('x');">

How do you insert it? Do you simply use document.innerHTML to insert ist
or do you go the "long but better" way to create an new Node fist and
append that node to the parent Element?
Is the problem that IE doesn't bind events for dynamically generated
elements?

Never tried. So it may be possible.
Is there a way make this happen?
Did you try to "bind" the event manually by setting

element.onblur = 'alert(x)';

?

Johannes
 
R

Richard Cornford

I'm using Javascript to insert an HTML element like

<input type="text" name="mytext" id="mytext" value="" onblur="alert('x');">

That may be an HTML element but just how are you creating/inserting it
with javascript (given that you have a number of choices there)?
In both IE7 and Firefox 3, the input field appears, and I can type
into it, but when I tab out of it to the next field, the alert
only happens in Firefox.

Is the problem that IE doesn't bind events for dynamically
generated elements?

That may depend on what you mean by "bind events" (or by "bind" and
"events"). Generally IE is fine with event listeners on dynamically
created elements (so long as you go about setting then
'correctly' (where 'correctly' does not refer to any single
approach)).
Is there a way make this happen?

Probably.

Richard.
 
J

Jonathan N. Little

Harlan said:
I'm using Javascript to insert an HTML element like

<input type="text" name="mytext" id="mytext" value="" onblur="alert('x');">

In both IE7 and Firefox 3, the input field appears, and I can type into
it, but when I tab out of it to the next field, the alert only happens
in Firefox.

Is the problem that IE doesn't bind events for dynamically generated
elements? Is there a way make this happen?

*Dang Motzarella will not let me cross post! I hope my ISP sorts out
their news server soon!*

Here is a very stripped down example to get you started...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>template</title>

<script type="text/javascript">
function insertField(){
var f=document.getElementById('daform');
var tb=document.createElement('input');
tb.setAttribute('name','mytext');
tb.setAttribute('id','mytext');

if( tb.addEventListener ) {
tb.addEventListener('blur',someFunc,false); //Proper
} else if( tb.attachEvent ) {
tb.attachEvent('onblur', someFunc); //IE only
}
else {
tb.onblur=someFunc; //old standby but does not append listeners
}
f.appendChild(tb);
}

function someFunc(){
alert("Im all set!");
}

// attach event after page loads
if( window.addEventListener ) {
window.addEventListener('load',insertField,false); //legacy
} else if( document.addEventListener ) {
document.addEventListener('load',insertField,false); //proper
} else if( window.attachEvent ) {
window.attachEvent('onload', insertField); //IE only
}
</script>

</head>
<body>
<form id="daform">
<input type="text" name="sample" value="existing element">
</form>
</body>
</html>
 
H

Harlan Messinger

Johannes said:
How do you insert it? Do you simply use document.innerHTML to insert ist
or do you go the "long but better" way to create an new Node fist and
append that node to the parent Element?


Never tried. So it may be possible.

Did you try to "bind" the event manually by setting

element.onblur = 'alert(x)';

?

Johannes
 
H

Harlan Messinger

Johannes said:
How do you insert it? Do you simply use document.innerHTML to insert ist
or do you go the "long but better" way to create an new Node fist and
append that node to the parent Element?


Never tried. So it may be possible.

Did you try to "bind" the event manually by setting

element.onblur = 'alert(x)';

I'm using element.setAttribute("onblur", "alert('x')") .
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top