js onclick working strange

Question

I have the next code

$.ajax({
                url: '/data',
                type: "POST",
                data: JSON.stringify(formData),
                contentType: "application/json",
                dataType: "json",
                success: function(response){
                    for (var i=0; i<response.length; i++) {

                        var htmlEdit = "creating button here";
                        var btnEdit = jQuery(htmlEdit);
                        btnEdit.appendTo(divCollapse);
                        btnEdit.click(function() {
                            editBooking(btnEdit);
                        });
                    }
               }
});


function editBooking(btn) {
    btn.button('loading');
}

So I have rows with identical items. Buttons are shown as expected. Click to any button invokes loading state for the last button. What I'm doing wrong? Thank you.

@DarrenSweeney this is set loading state to the bootstrap button — Alex Zaitsev, Jan 19 '16 at 12:38
`btnEdit`, at the time the button is clicked, in `editBooking(btnEdit);` is not what you think it is. — Teemu, Jan 19 '16 at 12:41
It's the last button you've created in the loop in all click handlers. — Teemu, Jan 19 '16 at 12:43

score 1 · Accepted Answer · answered Jan 19 '16 at 12:46

Just try that :

$.ajax({
    url: '/data',
    type: 'POST',
    data: JSON.stringify(formData),
    contentType: "application/json",
    dataType: "json",
    success: function(response){
        var htmlEdit;
        var btnEdit;
        for (var i=0; i<response.length; i++) {
            htmlEdit = 'creating button here';
            btnEdit = $(htmlEdit);
            btnEdit.appendTo(divCollapse);
            btnEdit.on('click', function(e) {
                editBooking($(this));
            });
        }
   }
});

function editBooking(btn) {
    btn.button('loading');
}

js onclick working strange

1 Answers1