...

View Full Version : onClick not working after setAttribute on IE nor Konkeror



SpiceMan
02-21-2005, 08:43 PM
Hello,
I'm generating a div with some selects, and a button to destroy such a div.

I do this by doing something like this:

var thediv = document.getElementById('thediv');
var deleteButton = document.createElement('input');
var select = documentblahblahblab you get the idea;
deleteButton.setAttribute('type', 'button', 0); // ",0" for IE
deleteButton.setAttribute('value', delete, 0);
deleteButton.setAtttribute('name', "button"+id, 0); // should I use deleteButton.name ?
deleteButton.setAttribute('onClick', 'removeItem("'+id+"')', 0);

Clicking on the button does execute the function removeItem in Firefox.

On the other hand IE although it creates the button, it doesn't detect the onClick event.

For testing purpouses, coding removeItem like this:

function removeItem () {
alert ("I'm HERE!");
}
won't execute no matter what.


the funny thing is that if I do:

alert (document.getElementsByName("button"+id)[0].getAttribute("onClick"));
it kindly gives a message stating "removeItem(whateverid)". On Both Firefox and IE, so the attribute IS there.


any pointers anyone?

sidvorak
02-21-2005, 09:30 PM
Try this. Instead of

deleteButton.setAttribute('onClick', 'removeItem("'+id+"')', 0);
Use


deleteButton.addEventListener('onClick', 'removeItem("'+id+"')', flalse);

liorean
02-21-2005, 10:00 PM
You say it works in moz? If so, that's a change, because this was one of the things that worked in no browser before. And in fact, there are good arguments for why it shouldn't matter. Assigning event handlers from attributes is a parse-time thing, and all DOM handling is post-parsing. And there's a separate DOM way of assigning event handlers anyway.

Well, to end by saying something useful, the only well working, reliable way of assigning event handlers is to use the old and tried DOM0 way.
deleteButton.onclick = function(){ // Note: onclick, not onClick
removeItem(id);
return true;
};

Lightro
06-28-2007, 05:10 AM
You say it works in moz? If so, that's a change, because this was one of the things that worked in no browser before. And in fact, there are good arguments for why it shouldn't matter. Assigning event handlers from attributes is a parse-time thing, and all DOM handling is post-parsing. And there's a separate DOM way of assigning event handlers anyway.

Well, to end by saying something useful, the only well working, reliable way of assigning event handlers is to use the old and tried DOM0 way.
deleteButton.onclick = function(){ // Note: onclick, not onClick
removeItem(id);
return true;
};

Thanks man I have been stuck on a similar problem for a few days this is very handy information :)

cobbce
01-04-2008, 11:24 PM
Well, to end by saying something useful, the only well working, reliable way of assigning event handlers is to use the old and tried DOM0 way.
deleteButton.onclick = function(){ // Note: onclick, not onClick
removeItem(id);
return true;
};

While this method works, it's easy to cause memory leaks when assigning anonymous functions to DOM elements, and one should be careful.
See
http://www.javascriptkit.com/javatutors/closuresleak/index3.shtml
and a good article on closures in general
http://www.jibbering.com/faq/faq_notes/closures.html#clFrmC

As far as a solution that risk memory leak, I'm not sure.

A1ien51
01-07-2008, 04:25 AM
IE does not add the name to the element through setAttribute or obj.name. You need to add it while using createElement. It is ugly!

If you want to see how you can add the name to the code you can see it here by viewing the source: http://www.pascarello.com/examples/createElement.html

Eric

felgall
01-07-2008, 04:50 AM
onclick is an event handler and NOT an attribute and therefore setting it as an attribute will not create the needed event handler for it to work.

pinkshiro
07-07-2008, 02:36 AM
IE does not add the name to the element through setAttribute or obj.name. You need to add it while using createElement. It is ugly!

If you want to see how you can add the name to the code you can see it here by viewing the source: http://www.pascarello.com/examples/createElement.html

Eric

This is a problem I am having at the moment and have started a new thread about. createElement is fine if you are making a new input and defining it's name at the same time....but as far as I can tell there is no 'IE friendly' way of modifying the name of an input that is already sitting in the DOM tree...Any thoughts?

Kor
07-08-2008, 03:55 PM
This is a problem I am having at the moment and have started a new thread about. createElement is fine if you are making a new input and defining it's name at the same time....but as far as I can tell there is no 'IE friendly' way of modifying the name of an input that is already sitting in the DOM tree...Any thoughts?
I don't think so. Where's your thread? Show us here the link to that thread.

SirJamieson
02-23-2009, 09:24 PM
This will work in all browsers...



try
{
//IE
var table = document.createElement("<table name='table_name'>");
}
catch (ex)
{
//Everything else (FF, Opera, etc)
var table = document.createElement('table');
}
table.setAttribute('id','table_id');
table.setAttribute('name', 'table_name'); //IE ignores
table.setAttribute('width', '800');
...etc...

thewizardoftn
02-26-2010, 03:58 PM
While this method works, it's easy to cause memory leaks when assigning anonymous functions to DOM elements, and one should be careful.
See
http://www.javascriptkit.com/javatutors/closuresleak/index3.shtml
and a good article on closures in general
http://www.jibbering.com/faq/faq_notes/closures.html#clFrmC

As far as a solution that risk memory leak, I'm not sure.

This will create the attribute for me, but I'm using it in an array, and the entire array then defaults to the highest value of the incidence



var loc = '/product/' + ary2[i];
this.mqo.ary[i].onclick = function() {
redirect(loc);
return true;
};


Such that every single image in an array of 4 sees i=4

Any idea on how to prevent that?

JonTJ
10-06-2010, 12:41 PM
i know this is a fairly old thread but i came here looking for the same solution and found a work around. Instead of creating a button or input field create an <a> tag:


var button = document.createElement('a');
button.setAttribute('href', 'javascript: functionToCall();');
button.innerHTML = 'Ok';

This means that the problem of attaching an onclick attribute or handler for previous versions of IE (before 8) is completely bypassed, headache gone!
You can also add an 'id' attribute and style it how you like to make it more button-like!

Hope this helps someone!

A1ien51
10-06-2010, 01:05 PM
i know this is a fairly old thread but i came here looking for the same solution and found a work around. Instead of creating a button or input field create an <a> tag:


var button = document.createElement('a');
button.setAttribute('href', 'javascript: functionToCall();');
button.innerHTML = 'Ok';

This means that the problem of attaching an onclick attribute or handler for previous versions of IE (before 8) is completely bypassed, headache gone!
You can also add an 'id' attribute and style it how you like to make it more button-like!

Hope this helps someone!

Um, that is not a good solution since you are creating an element that you do not want. Why is it so hard to do


var button = document.createElement('button');
button.onclick = functionToCall;
button.innerHTML = 'Ok';

Seems easy enough to me.

Eric



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum