JS 将 onClick 动作设置为在循环内创建的 Button

Question

如何定义在此循环内创建的按钮的 onClick 属性？JQuery 对于那个 class 似乎根本不起作用。

    for(started somewhrere...

        var button = document.createElement('button')
        var div = document.createElement('div')
        var img = document.createElement('img')
            img.src = "../img/download.png"
        var p = document.createElement('p')
            p.appendChild(document.createTextNode("Descargar"))

        div.appendChild(img);
        div.appendChild(p);
        button.appendChild(div);

        button.onClick = "DOSOMETHINGFFS()"

        button.className = "download"

     for end somewhere...}

function DOSOMETHINGFFS(){
    alert("no")
}

顺便说一句 JQuery 根本没有帮助

$(".download").click(function() {
    alert("ok")
});

Answer 1

确保您确实将元素添加到页面（例如下面的 container.appendChild），并且您拼错了 onclick。（你有一个大写的 C。）否则，我认为你所做的是好的，但最好分配实际函数而不是分配带有 JavaScript 代码的字符串，该代码进行函数调用：

function doSomething(url){
    console.log("download " + url);
}

var container = document.getElementById("container");
for (var i = 0; i < 5; i++) {
    var button = document.createElement('button');
    button.innerText = "click me";
    button.className = "download";
    button.onclick = (function (url) {
        return function () {
            doSomething(url);
        };
    })("URL #" + i);
    container.appendChild(button);
}

$('.download').click(function () {
    console.log("clicked from jQuery handler");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

编辑

还使用 jQuery 添加处理程序。这也很好用。

编辑 2

更改了 onclick 示例以包含每个按钮的不同参数。有几种方法可以实现这一点，但我使用了 immediately-invoked function expression (IIFE).

Answer 2

这将处理动态添加到 dom 的任何元素的点击事件。

$('body').on("click",".download" , function() {
    alert("ok");
});

Answer 3

$(".download").click(function() {
    alert("ok")
});

如果按钮已经在 DOM 中，上面的代码将起作用，因为您是动态创建它，所以您需要将点击绑定到父元素上作为

$(document).on('click','.download',function(){
  alert('ok');
});

JS 将 onClick 动作设置为在循环内创建的 Button

JS Set onClick action to a Button that was create inside a loop

html

javascript

generated