How can I create a loop that creates functions with data from an array?

Question

How to do something like this in a loop? Or is there a better way to do it?

      $('#btndelete' + rowid[i]).click(function(){
      $.ajax({
        type: "POST",
        url: "delete.php?id=rowid[i]",
        success: function(a) {
                $('#div-content').html(a);
        }
    });
});

Use `class selector`/`any selector` which will return collection. — Rayon, Feb 04 '16 at 08:20
Can't you just save all rowid values in one variable(may b array) n pass on controller side — Dhara, Feb 04 '16 at 08:21

score 0 · Accepted Answer · edited May 23 '17 at 11:59

You can put it in a loop, by giving the handlers something to close over that won't change, like an argument in a function call you make:

rowid.forEach(function(value) {
    $('#btndelete' + value).click(function() {
        $.ajax({
            type: "POST",
            url: "delete.php?id=" + value,
            success: function(a) {
                $('#div-content').html(a);
            }
        });
    });
});

(If rowid isn't an array, you can easily make it one with Array.from [ES2015, but shimmable] or Array.prototype.slice.call(rowid).)

More details here: JavaScript closure inside loops – simple practical example.

But, in this particular case, you don't need to create a bunch of handler functions; put the rowid[i] on the element and then use a single handler for all of them:

rowid.forEach(function(value) {
    $("#btndelete" + value).data("rowid", value);
});
$("[id^=btndelete]").click(function() {
    $.ajax({
        type: "POST",
        url: "delete.php?id=" + $(this).data("rowid"),
        success: function(a) {
            $('#div-content').html(a);
        }
    });
});

Now a single handler handles all of them.

Or if these buttons are added/removed dynamically, you might use event delegation on some container.

How can I create a loop that creates functions with data from an array?

1 Answers1