.click（）不适用于ajax加载的内容

Question

I have a Datatable which fetches the data from my server using AJAX.

This code adds the data to the Datatable and also adds some buttons to it

                var jsdata = JSON.parse(data);
                for (var i = 0; i < jsdata.length; i++) {
                    var actions =
                            '<div class="btn-group">' +
                                '<button class="btn btn-default btn-xs" type="button" data-button=\'{"func": "func1"}\' data-process_id="' + jsdata[i][0] + '"><i class="icon-remove"></i> </button>' +
                            '</div>';
                    jsdata[i].push(actions);
                }

I also have this code which should grab a click on the created buttons (by the above script)

$('button').click(function() {
    alert('test');
});

Unfortunately the functions does not get called. If i place the buttons directly (without the AJAX request) it works fine.

How can i fix this?

Answer 1

Attach the event handler using on

$(document).on("click", "button",function() {
    alert('test');
});