fail to bind onclick event after innerHTML

Question

var gid = function (id) {
  return document.getElementById(id);
},
info = gid('info');

function out(str) {
  if ((info.innerHTML + '').trim() === '') {
    info.innerHTML += '<a id="cleanResult" href="javascript:;">clean</a><br />';
    gid('cleanResult').onclick = function () {
      info.innerHTML = '';
      return false;
    };
  }
  info.innerHTML += str;
}
out('1234');

Why a#cleanResult fail to bind onclick event?
I change the code, add setTimeout:

 setTimeout(function () {
   gid('cleanResult').onclick = function () {
    info.innerHTML = '';
    return false;
   };
 },1);

and it works.

See http://stackoverflow.com/q/5113105/632951 – Pacerier May 07 '14 at 13:51 — Pacerier, May 07 '14 at 13:51

score 1 · Accepted Answer · answered Feb 11 '13 at 17:39

When you change the innerHTML, this causes a complete rebuild of the DOM by the browser. So, in this case, your final info.innerHTML += str; causes a rebuild of the DOM which includes child objects. Therefore, your reference to cleanResult gets lost.

However, by adding your onclick binding in a setTimeout, you are being called after the DOM has been rebuilt and thus binding correctly. Therefore, you should only append to innerHTML if you don't care about what just happened previously in the method. You can fix your case as follows:

var gid = function (id) {
    return document.getElementById(id);
};   

function out(str) {
    var info = gid('info');        
    if (info.innerHTML.trim() === '') {
        info.innerHTML += '<a id="cleanResult" href="javascript:;">clean</a><br />';
        info.innerHTML += str;
        gid('cleanResult').onclick = function () {
            info.innerHTML = '';
            return false;
        };
    } else {
        info.innerHTML += str;
    }
}
out('1234');

I also have to say that you need to be very careful about global variable declarations such as info. Always make sure to add var before your variable declarations to prevent scoping errors.

Actually `info` and lots of other variable is declared under a closure. Thanks for the answer! — s25g5d4, Feb 12 '13 at 02:43

fail to bind onclick event after innerHTML

1 Answers1