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

你可以尝试这个|的 Demo

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

Answer 2

我为样本构建了a fiddle here。

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

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

如何在动态div上插入onclick（）

2 个答案: