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

我 build 了 a fiddle here sample 。

这里的关键点是你不应该在循环中使用这样的东西。

<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。