Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer onClick not working after setAttribute on IE nor Konkeror

    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:
    Code:
    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:
    Code:
    function removeItem () {
        alert ("I'm HERE!");
    }
    won't execute no matter what.


    the funny thing is that if I do:
    Code:
    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?

  • #2
    New Coder
    Join Date
    Mar 2004
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this. Instead of
    Code:
    deleteButton.setAttribute('onClick', 'removeItem("'+id+"')', 0);
    Use
    Code:
    deleteButton.addEventListener('onClick', 'removeItem("'+id+"')', flalse);

  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    Code:
    deleteButton.onclick = function(){ // Note: onclick, not onClick
        removeItem(id);
        return true;
    };
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    New Coder
    Join Date
    Mar 2007
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by liorean View Post
    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.
    Code:
    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

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by liorean View Post
    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.
    Code:
    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/javatut...k/index3.shtml
    and a good article on closures in general
    http://www.jibbering.com/faq/faq_not...es.html#clFrmC

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

  • #6
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by A1ien51 View Post
    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?

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by pinkshiro View Post
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic Element creation in ALL browsers...

    This will work in all browsers...

    Code:
    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...
    Last edited by SirJamieson; 02-24-2009 at 05:09 PM. Reason: added [code][/code] tags

  • #11
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by cobbce View Post
    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/javatut...k/index3.shtml
    and a good article on closures in general
    http://www.jibbering.com/faq/faq_not...es.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

    Code:
    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?

  • #12
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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!
    Last edited by JonTJ; 10-06-2010 at 12:43 PM. Reason: forgot to encase code in [CODE] tag

  • #13
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Quote Originally Posted by JonTJ View Post
    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:

    Code:
    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

    Code:
    var button = document.createElement('button');
    button.onclick =  functionToCall;
    button.innerHTML = 'Ok';
    Seems easy enough to me.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •