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

Question

How to define the onClick property of the Buttons created inside this loop?.JQuery doesn't seem to work at all for that 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")
}

BTW JQuery isn't really helping at all

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

You're looking for [**onclick**](https://stackoverflow.com/a/87958/2341603) rather than `onClick`. — Obsidian Age, Jun 19 '17 at 04:05
you may want a [delegated event](http://api.jquery.com/on/#direct-and-delegated-events) e.g. `$.on('click', ".download", function() { alert("ok") });` — Jaromanda X, Jun 19 '17 at 04:07
Tried both and the alert refuses to appear. Nope, theres another div that contains the button. — Wesos de Queso, Jun 19 '17 at 04:08

user94559 · Accepted Answer · 2017-06-19T05:42:08.363

Make sure you're actually adding the elements to the page (e.g. container.appendChild below), and you misspelled onclick. (You had a capital C.) Otherwise, I think what you did was okay, but it's better to assign the actual function instead of a string with JavaScript code that makes a function call:

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>

EDIT

Also used jQuery to add a handler. That works fine too.

EDIT 2

Changed the onclick example to include a different parameter for each button. There are several ways to achieve this, but I used an immediately-invoked function expression (IIFE).

Each download button fires the download function, and each button should download a specific file. Whenever i tried to pass a parameter (the link or url) it instally downloads onLoad and never triggers. I guess it was called while the loop was running. — Wesos de Queso, Jun 19 '17 at 05:37

score 1 · Answer 2 · answered Jun 19 '17 at 04:11

1

This will handle the click events of any element added dynamically to the dom.

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

answered Jun 19 '17 at 04:11

Vivek Doshi

56,649
12
110
122

score 0 · Answer 3 · answered Jun 19 '17 at 04:17

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

The above code will work in case the button has been already in the DOM , since you are creating it dynamically so you need to bind the click on the parent element as

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

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

3 Answers3