javascript - 動的 div に onclick() を挿入する方法

Question

以下は、javascript を使用して動的 div を生成する関数です。生成された動的 div で javascript onclick() を使用したいのですが、onclick の実行中に変数の実際の値を取得できません。また、隣接する onclick() が機能していません。前もって感謝します。

function selecteditems()
    {

    var i=1;
    //var val="";
    var fld = "";
    var newdiv = document.createElement("div");
    document.getElementById("showselecteditems").innerHTML="";

    while(i<=53)
    {
    fldOne = document.getElementById('datepicker_value').value;
    fld = document.getElementById('timedrpact'+i).value;
    fidpartnum = document.getElementById('selectdrpact'+i).value;
    fidrepeat = document.getElementById('repeat'+i).value;

    if(fld!="")
    {
            var par='ddwnx'+i;
            var ele = document.createElement("div");
            ele.setAttribute("id","showselecteditems"+i);
            ele.setAttribute("class","inner");

//Trouble here.Onclick() not alerts actual value.Instead alert as [objectHTMLDivElement].
//Also consecutive onclick not working.
              ele.innerHTML="<a onclick='return closedthis("+par+")';><img src='images/close.png' width='30' height='30'></a>"+fldOne+"&nbsp;,&nbsp;"+fld+"&nbsp;,&nbsp;"+fidpartnum+"&nbsp;Paticipants, &nbsp;"+fidrepeat+"&nbsp;Repeat";
            //ele.innerHTML=fldOne+"&nbsp;,&nbsp;"+fld+"&nbsp;,&nbsp;"+fidpartnum+"&nbsp;Paticipants, &nbsp;"+fidrepeat+"&nbsp;Repeat";
            document.getElementById("showselecteditems").appendChild(ele);
    }
        i++;
        }

    }

Answer 1

サンプル用にここにフィドルを作成しました。

ここでの重要なポイントは、このようなものをループで使用しないことです。

<a onclick='return closedthis("+par+") ... 

それが機能しても、パラメーターparは常に設定した最後の値になります。あなたの場合、それは 54. data-indexたとえば、動的要素にカスタム属性を設定this.getAttribute()し、イベント ハンドラーで使用する必要があります。

$ = document.getElementById.bind(document);

$("createButtons").addEventListener("click", function () {
    $("container").innerHTML = "";
    for (var i = 0; i < 50; i++) {
        var element = document.createElement("div");
        element.setAttribute("class", "dynamicButton");
        element.setAttribute("data-index", i);
        element.innerHTML = i;
        element.onclick = function () {
            // do not use this, since when you click the button, i will always be 50 (the last value you set)
            // $("clickedIndex").innerText = i;

            // use this instead
            var index = this.getAttribute('data-index');
            $("clickedIndex").innerText = index;
        };

        /*
        element.addEventListener("click ", function () {
            var index = this.getAttribute('data-index');
            $("clickedIndex").innerText = index;
        });
        */
        $("container").appendChild(element);
    }
});

そして確かに、あなたも使うことができますelement.addEventListener。

Answer 2

これを試すことができます | デモ

function myfunc()
{
     alert('clicked');   
}

var el = document.createElement('a');
el.setAttribute("href","javascript:void(0)"); // to cancel the default effect of anchor tag
el.onclick = myfunc;
if(el.innerText)
{
    el.innerText = "click me";
}
else el.textContent ="click me";
document.body.appendChild(el);