Events on dynamically generated elements in IE

Discussion in 'HTML' started by Harlan Messinger, Apr 20, 2009.

  1. 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?
    Harlan Messinger, Apr 20, 2009
    #1
    1. Advertising

  2. Harlan Messinger schrieb:
    > 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
    Johannes Hafner, Apr 20, 2009
    #2
    1. Advertising

  3. On Apr 20, 2:06 pm, Harlan Messinger wrote:
    > 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.
    Richard Cornford, Apr 20, 2009
    #3
  4. Harlan Messinger wrote:
    > 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>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 20, 2009
    #4
  5. Johannes Hafner wrote:
    > Harlan Messinger schrieb:
    >> 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
    Harlan Messinger, Apr 20, 2009
    #5
  6. Johannes Hafner wrote:
    > Harlan Messinger schrieb:
    >> 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)';


    I'm using element.setAttribute("onblur", "alert('x')") .
    Harlan Messinger, Apr 20, 2009
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chris

    Events Events Events Please Help

    Chris, Aug 30, 2005, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    335
    Chris
    Aug 30, 2005
  2. sam
    Replies:
    1
    Views:
    89
    Stephen Chalmers
    Apr 5, 2006
  3. Replies:
    1
    Views:
    147
    Peter Michaux
    Apr 27, 2007
  4. Replies:
    4
    Views:
    105
  5. Harlan Messinger

    Events on dynamically generated elements in IE

    Harlan Messinger, Apr 20, 2009, in forum: Javascript
    Replies:
    21
    Views:
    401
    Harlan Messinger
    Apr 22, 2009
Loading...

Share This Page