innerHTML and event handlers

Discussion in 'Javascript' started by Tim Fooy, Apr 28, 2004.

  1. Tim Fooy

    Tim Fooy Guest

    Hi all,

    I have the following problem. In my page i have a large <div> with tags
    inside it that have event handlers on them (onclick etc.). When i run
    div.innerHTML = moreText + div.innerHTML, either before or after the page
    has fully loaded, all of those event handlers are dropped: the actions for
    the event are not executed anymore.

    I can't find anything related to this problem on the internet. Has anyone
    ever encountered a similar problem?

    TIA,

    regs,

    Tim
     
    Tim Fooy, Apr 28, 2004
    #1
    1. Advertisements

  2. Tim Fooy

    Mike Guest

    It's not really a problem, rather it is just the way it works. I suggest
    repacing the innerHTML calls with using the DOM
    (http://www.quirksmode.org/?dom/contents.html for reference) or just add and
    empty SPAN tag or something as the first element in the DIV and perform the
    innerHTML on the SPAN element.
     
    Mike, Apr 29, 2004
    #2
    1. Advertisements

  3. That suggests to me that there is a javascript error somewhere that you're
    encountering just after the line you show. An error can cause all scripts
    on a page to stop functioning - or more precisely, cause the browser to stop
    running them. What's going on around that line?

    - Wm
     
    William Morris, Apr 29, 2004
    #3
  4. Tim Fooy

    Tim Fooy Guest

    Hi all,
    I don't understand that "that's the way it works". Inside another <div> on
    my page the same situation happens, and the event handlers inside that <div>
    keep working after the innerHTML line.
    Anyway, thanks for the suggestions. I'll try them out tomorrow.

    Tim
     
    Tim Fooy, Apr 29, 2004
    #4
  5. Tim Fooy

    Tim Fooy Guest

    "William Morris" schreef:
    If i comment out the mentioned line, everything keeps working. There is
    also no script error indication in the statusbar of IE.

    Tim
     
    Tim Fooy, Apr 29, 2004
    #5
  6. Tim Fooy

    Tim Fooy Guest

    Both of your solutions solved the problem ;-) Thanks a lot!

    Tim
     
    Tim Fooy, Apr 30, 2004
    #6
  7. Yes. I once tried to wrap a DIV inside another, dynamically created DIV.
    All of the event handlers were removed:

    <body>
    <div id="outerDiv">
    <div id="testDiv">
    Page content
    </div>
    </div>
    <script type="text/javascript">
    var oD = document.getElementById( 'outerDiv' );
    var tD = document.getElementById( 'testDiv' );

    tD.onclick = function() {
    alert( 'original' );
    };

    oD.innerHTML = '<div>' + oD.innerHTML + '</div>';
    </script>
    </body>

    This even fails if attachEvent() or addEventListener() is used to add the
    listener.

    The solution for recent browser versions is to use DOM methods to create
    and insert new nodes:

    <body>
    <div id="outerDiv">
    <div id="testDiv">
    Page content
    </div>
    </div>
    <script type="text/javascript">
    var nD = document.createElement( 'DIV' );
    var oD = document.getElementById( 'outerDiv' );
    var tD = document.getElementById( 'testDiv' );

    tD.onclick = function() {
    alert( 'original' );
    };

    nD.appendChild( oD.replaceChild( nD, tD ));
    </script>
    </body>

    Mike
     
    Michael Winter, May 1, 2004
    #7
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.