1 
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');

a#cleanResultonclickイベントのバインドに失敗するのはなぜですか？
コードを変更し、追加しsetTimeoutます：

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

そしてそれは動作します。

4

1 に答える 1

1

を変更するinnerHTMLと、ブラウザによって DOM が完全に再構築されます。したがって、この場合、finalは子オブジェクトを含むinfo.innerHTML += str;DOM の再構築を引き起こします。したがって、への参照が失われます。cleanResult

onclickただし、バインディングを aに追加するsetTimeoutと、DOM が再構築された後に呼び出され、正しくバインディングされます。したがって、メソッドで以前に何が起こったかを気にしない場合にのみ、innerHTML に追加する必要があります。次のようにケースを修正できます。

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');

また、info. varスコープエラーを防ぐために、変数宣言の前に必ず追加してください。

于 2013-02-11T17:39:11.307 に答える