コンテキスト変数を引数としてonclickイベントハンドラに渡す

Question

*これは、forループ内のより大きなコードブロック内で発生しています。ループ全体については、ポストの終わりを参照してください。

この件に関する投稿のすべてを読みましたが、まだ失われています。

私はonclickイベントをチェックボックスに割り当てようとしています。 onclickイベントに割り当てられている関数は、チェックボックスが定義されているスコープで使用可能な変数（idvariable）にアクセスできる必要があります。

var idvariable = parentChildList[i].children[j]["subjectid"]; 
var input = document.createElement("input"); 
input.type = "checkbox"; 
input.value = ""; 
input.onclick = function() { 
    return clicked(idvariable); 
}; 

function clicked(id) { 
    alert(id); 
}; 

私は、インラインと名前の関数のすべてのバリエーションを試してみたが、私はクリックされた関数にidvariableへのアクセス権を与える方法を見つけ出すことはできません。上記の例では、その変数の値は未定義です。

それとも、私はこの方法でそれをしようとした場合：

var input = document.createElement("input"); 
input.type = "checkbox"; 
input.value = ""; 

var idvariable = parentChildList[i].children[j]["subjectid"]; 
input.onclick = function (idvariable) { 
    return clicked(idvariable); 
}; 

function clicked(id) { 
    alert(id); 
}; 

は、私が言う警告を取得[オブジェクトのMouseEvent]。私は、onclickイベントに割り当てるよ、私はメソッド名から（）削除下記と同じ：

var idvariable = parentChildList[i].children[j]["subjectid"]; 
input.onclick = function() { 
    return clicked; 
}(idvariable); 

function clicked(id) { 
    return alert(id); 
}; 

*ループ全体：

for (var i = 0; i < parentChildList.length; i++) { 
     var row = table1.insertRow(-1); 
     var cell = row.insertCell(0); 
     cell.innerHTML = 
      "<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse" + i + "\">" + parentChildList[i]["title"] + "</a></h4>"; 

     if (parentChildList[i].children.length > 0) { 
      var row2 = table1.insertRow(-1); 
      var cell2 = row2.insertCell(0); 

      var table2 = document.createElement("table"); 
      table2.className = "collapse"; 
      table2.id = "collapse" + i; 
      cell2.appendChild(table2); 

      for (var j = 0; j < parentChildList[i].children.length; j++) { 
       var row3 = table2.insertRow(-1); 
       var cell3 = row3.insertCell(0); 
       var div = document.createElement("div"); 
       div.className = "checkbox"; 

       var label = document.createElement("label"); 
       label.innerText = parentChildList[i].children[j]["title"]; 

       var input = document.createElement("input"); 
       input.type = "checkbox"; 
       input.value = ""; 
       input.setAttribute('subj', idvariable); 

       var idvariable = parentChildList[i].children[j]["subjectid"]; 
       alert(idvariable); 
       input.onclick = function() { 
        return clicked(this.getAttribute('subj')); 
       }; 

       function clicked(id) { 
        return alert(id); 
       }; 

       cell3.style.padding = "0px 0px 0px 10px"; 
       cell3.style.fontsize = "x-small"; 

       cell3.appendChild(div); 
       div.appendChild(label); 
       label.insertBefore(input, label.childNodes[0]); 
      } 
     } 
    } 

Answer 1

onclickハンドラがEventオブジェクトを受け取る

感謝。 elem.onclick=handlerとしてアタッチされているハンドラの場合は、ハンドラ内でthisという要素を使用できます。これは回避策です。

var idvariable = parentChildList[i].children[j]["subjectid"]; 
var input = document.createElement("input"); 
input.type = "checkbox"; 
input.value = ""; 
input.setAttribute('data-subj', idvariable); 
input.onclick = function() { 
    return clicked(this.getAttribute('data-subj')); 
}; 

function clicked(id) { 
    alert(id); 
}; 

Answer 2

あなたは、いくつかのチェックボックスを追加する必要があります既存の要素を最初に、次のコードを使用します。

var element = document.getElementById("one").appendChild(input); 

次に、あなたは、xは、親要素が含まれます、次の...

var x = document.getElementById("someId").parentElement; 

のようなものを使用して親を得ることができます。

このリンクhttps://stackoverflow.com/a/9418326/886393は、イベント（カスタムイベント）のカスタムデータについてです。希望が役立ちます。

パラス