Dynamically created select not firing events in IE, works in other browses

tapuleo · Jul 22, 2007

I'm creating a select tag, with options on the fly, and the events
(onclick, onchange, onkeydown) are not firing at all in Internet
Explorer. I tried IE 6 and 7...no luck. This all works fine in
Firefox.

Is there some trick to getting this to work in IE? Here's a short
example. If you click the button, the select (listbox) appears, but
no events fire.

------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<script language="javascript" type="text/javascript">
function go()
{
var sel = document.createElement('select');

// hack to make IE show listbox, not dropdown
sel.length = 10; sel.length = 0;

sel.setAttribute("id","wsrListBox");
sel.setAttribute("size","10");

// try to set event ***NEVER FIRES in IE***
sel.setAttribute("onclick","alert(1);");

sel.options[0] = new Option("one","1");
sel.options[1] = new Option("two","2");

document.body.appendChild(sel);
}
</script>
</head>

<body>
<form>
<button onclick="go();return false;">Go!</button>
</form>
</body>

</html>

tapuleo · Jul 22, 2007

tapuleo said the following on 7/22/2007 3:08 PM:

Why are you trying to get IE to parse a document that it inherently
doesn't recognize? Use HTML4.01 strict and forget XHTML.

sel.id = "wsrListBox"
sel.size = 10;

sel.onclick = function() { alert(1)};

setAttribute is known to be buggy in IE.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Perfect-o. sel.onclick did the trick.

Thanks!

Thomas 'PointedEars' Lahn · Aug 1, 2007

David said:
This is not appropriate. Try this instead:

sel.onclick = function() {alert(1);};

That is a strange interpretation of appropriate, considering that both
approaches are proprietary, while the second one is probably less
compatible due to the lambda function expression.

The following works:

sel.setAttribute("onclick", function foo() { window.alert(1); });

Or (more compatible, because also proprietary in NN, Geckos, and Operas):

sel.onclick = function foo() { window.alert(1); };

However, I recommend to use a wrapper function instead, like
_addEventListener() in http://pointedears.de/scripts/dhtml.js

PointedEars

Thomas 'PointedEars' Lahn · Aug 1, 2007

Thomas said:
That is a strange interpretation of appropriate, considering that both
approaches are proprietary, while the second one is probably less
compatible due to the lambda function expression.

The following works:

sel.setAttribute("onclick", function foo() { window.alert(1); });

Sorry, I misread and mistyped setAttribute() for attachEvent():

sel.attachEvent("onclick", function foo() { window.alert(1); });

However, see the recommendation in my other followup.

PointedEars

Thomas 'PointedEars' Lahn · Aug 1, 2007

Randy said:
Thomas 'PointedEars' Lahn said the following on 8/1/2007 8:41 AM:

Considering that setAttribute is buggy in IE and explicitly does not
work in this situation, it is a very proper interpretation of appropriate.

Too late.

If the quality of the script in that file is of the same quality as the
information in your whatami page then it is best left alone as the
whatami document has broken links and is factually incorrect.

If you have nothing constructive to say, why don't you just shut up?

PointedEars

Thomas 'PointedEars' Lahn · Aug 1, 2007

Randy said:
Thomas 'PointedEars' Lahn said the following on 8/1/2007 8:55 AM:

What's wrong Thomas? Can't handle somebody telling you that your
document is "factually incorrect" and "has broken links"?

I can handle that if it is presented in a constructive manner.

Or, would you prefer I tell you why I say that?

That would be the constructive way, yes.

Broken link:
protocol does not always work. It falls into the same category as
mailto: links.

I know. So should anyone who is interested in this newsgroup. I might
add a note that appropriate software and configuration is required. If
you had read and replied to my e-mail in which I ask what you mean by
"broken links" (which I wrote immediately after I saw the posting
because such discussion is off-topic here), you would have had that
answer right away.

If you want a link to comp.lang.javascript on your site
then the safest link would be to the archives.

No, it would not. Unfortunately, Google Groups has its own flaws now.
However, I am considering to add a link to it.

Factually incorrect:
The page implies (whether directly or indirectly) that object detection
is always the best way.

No, it does not. Feature detection is much more than just object
detection, which is clearly stated there.

And I say that is totally bogus crap. If you
want, you can prove me wrong though:

1) Give me a "feature detection" script to tell whether
window.external.addFavorites is supported or not. Hint: You can't.

You can try... and catch.

2) In Internet Explorer, this code errors fatally:
function useCreateTextNode()
{
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScriptText = "alert('createTextNode worked')";
var s = document.createTextNode(newScriptText);
newScript.appendChild(s);
document.getElementById("scriptDiv").appendChild(newScript);
}

With this HTML:

<div id="scriptDiv"></div>

Straw man. I am not saying that feature detection can handle
everything. I am saying that it is superior to the other two approaches
in question. Which is nothing more than what appears to be the
consensus among the regulars of this newsgroup.

As for creating a `script' element with client-side scripting, I am sure
to have commented on and recommended against this here quite enough.
Search your beloved Google archives for that.

And as for dynamically creating a `script' element as child of a `div'
element, I had not even got the idea of doing that.

[...]
So, either give me a true feature detection script that can cover both
of those scenarios or admit that your page is factually incorrect and
that I was right.

Non sequitur. Your interpretation of its content is merely ... *your*
interpretation.

PointedEars

David Mark · Aug 1, 2007

On Aug 1 said:
1) Give me a "feature detection" script to tell whether
window.external.addFavorites is supported or not. Hint: You can't.

I think this is a valid test (has been in practice):

if (window.external && typeof(window.external.AddFavorite) ==
'unknown') {
....
}

Thomas 'PointedEars' Lahn · Aug 1, 2007

David said:
I think this is a valid test (has been in practice):

if (window.external && typeof(window.external.AddFavorite) == ^^^^^^^^^^^
'unknown') {
...
}

Probably you mean

if (window.external
&& typeof(window.external.addFavorites) == 'unknown')
{
// ...
}

While I would prefer to test that the `typeof' operation does not yield
"undefined" instead of testing against "unknown", the test is still
flawed because it only tests whether the property exists, not if there
is a method addFavorites() that can be called. One could use
try...catch to work around this, however try...catch is not backwards
compatible.

PointedEars

Thomas 'PointedEars' Lahn · Aug 1, 2007

Thomas said:
Probably you mean

if (window.external
&& typeof(window.external.addFavorites) == 'unknown')

addFavorite. I copied Randy's typo.

David Mark · Aug 1, 2007

Probably you mean

if (window.external
&& typeof(window.external.addFavorites) == 'unknown')
{
// ...
}

No I didn't. The ellipsis is just a placeholder that means "insert
script here." It isn't meant to be copied and pasted verbatim. And
methods of activeX objects are not case-sensitive, so I did indeed
mean "AddFavorite." Certainly I didn't mean "addFavorites."

While I would prefer to test that the `typeof' operation does not yield
"undefined" instead of testing against "unknown", the test is still

That wouldn't be as good a test. What do you know of, besides methods
of activeX objects, that returns type unknown. I think perhaps this
is the perfect test for this MS-specific feature. Another browser
could create a stub, but it wouldn't be of type unknown (it would be a
function object.)

flawed because it only tests whether the property exists, not if there
is a method addFavorites() that can be called. One could use

Yes. Your theoretical test would be flawed in that way. Mine has
been in production for years and has never had a reported issue.

try...catch to work around this, however try...catch is not backwards
compatible.

Right.

Thomas 'PointedEars' Lahn · Aug 2, 2007

David said:
No I didn't. The ellipsis is just a placeholder that means "insert
script here." It isn't meant to be copied and pasted verbatim.

It's not about the ellipsis.

And methods of activeX objects are not case-sensitive,

JScript is. But since it checks out, I can accept that as a deviation
from Randy's condition.

so I did indeed mean "AddFavorite." Certainly I didn't mean
"addFavorites."

That was a copy-and-paste error.

That wouldn't be as good a test. What do you know of, besides methods
of activeX objects, that returns type unknown. I think perhaps this
is the perfect test for this MS-specific feature. Another browser
could create a stub, but it wouldn't be of type unknown (it would be a
function object.)

Since we are talking about a host-defined property, all bets are off.
However, what is more probable is that it does not yield "undefined"
because that is a specified value.

Yes. Your theoretical test would be flawed in that way. Mine has
been in production for years and has never had a reported issue.

That you do not get any reports does not mean that it is any good.
You should know that.

PointedEars

David Mark · Aug 2, 2007

It's not about the ellipsis.

And what is "it" about?

JScript is. But since it checks out, I can accept that as a deviation
from Randy's condition.

It isn't when calling methods of ActiveX objects.

[snip]

Since we are talking about a host-defined property, all bets are off.
However, what is more probable is that it does not yield "undefined"
because that is a specified value

But that isn't nearly as good an indication of whether it will work or
not (which was my point.)

[snip]

That you do not get any reports does not mean that it is any good.

It's quite good and empirical evidence collected for years-on-end
supports that claim. Furthermore, my assertion that your suggestion
is not quite as good requires no testing at all.

David Mark · Aug 2, 2007

[snip]

I have to admit I didn't think I would ever see one that was successful
(all the others I have seen failed in AOL). But, that one succeeds. I am
pleasantly surprised and grateful for the snippet.

It is a weird one. It was derived empirically several years back when
I was trying to implement a cross-browser "Add to Favorites" link. I
could only ever cover IE and Gecko-based browsers. I have seen some
really weird code for adding a favorite in Opera, but I didn't like
the look of it (I think the only screening test was window.opera.)

Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
Multi select options in a menu	1	Oct 30, 2022
Loop through record in datareader in aspx for textbox other item	1	Sep 26, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Scrolling multiple-select, IE vs Firefox	4	Apr 29, 2006
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
select bug in IE	2	Mar 8, 2005
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024

Dynamically created select not firing events in IE, works in other browses

tapuleo

tapuleo

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

David Mark

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

David Mark

Thomas 'PointedEars' Lahn

David Mark

David Mark

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads