Why does the button inside of an ajax result in JQueryUI Dialog doesn't fire when clicked?

Question

So I created a JQuery dialog and gets its content (table) using ajax. The table includes all columns from DB and I added a button in each row which has its id (from database) that corresponds when clicked it will show me the full details. The problem is, the buttons on every row of the table doesn't respond at all even for a simple js alert it doesn't show any.

$(".view-table-btn").on( "click", function() {
    var group_id = $(this).attr('data-group_id');
    $.ajax({
        type: "POST",
        data:{
            search:"table",
            group_id:group_id,
        },
        url: "./function/view_group-table.php",
        success: function (table_data) {
            $("#group-attr_table").dialog( "open" );
            $('#group-attr_table').empty();
            $('#group-attr_table').append(table_data);
        }
    });
});

$( "#group-attr_table" ).dialog({
    autoOpen: false,
    resizable: false,
    width:800,
    height:600,
    modal: true,
    draggable: false,
    show: {
        effect: "fold",
        duration: 500
    },
    hide: {
        effect: "slide",
        duration: 500
    },
});
 // Here is the code for the button onclick on the ajax table inside of a dialog 
$(".user_details").on( "click", function() {
    var id = $(this).html();
    alert(this);
    console.log(id);
});

UPDATE It's already fixed, thanks to @dubafek! If planning to add dataTables with it just change it with this

$("#datatable_id").on("click", ".btn-class", function()
 //Your code goes here 
});

score 1 · Accepted Answer · answered Sep 19 '22 at 04:37

I'm not sure what table_data contains, but I'll assume that are objects with the class attribute .user_details. In that case, since the AJAX call is asynchronous, you are assigning the click behavior before the objects exist in the DOM. I would recommend you assign the click event trigger when you fill out the table:

$(".view-table-btn").on( "click", function() {
    var group_id = $(this).attr('data-group_id');
    $.ajax({
        type: "POST",
        data:{
            search:"table",
            group_id:group_id,
        },
        url: "./function/view_group-table.php",
        success: function (table_data) {
            $("#group-attr_table").dialog( "open" );
            $('#group-attr_table').empty();
            $('#group-attr_table').append(table_data);
            $(".user_details").on( "click", function() {
                var id = $(this).html();
                alert(this);
                console.log(id);
            });
        }
    });
});

$( "#group-attr_table" ).dialog({
    autoOpen: false,
    resizable: false,
    width:800,
    height:600,
    modal: true,
    draggable: false,
    show: {
        effect: "fold",
        duration: 500
    },
    hide: {
        effect: "slide",
        duration: 500
    },
});

Hope it helps

Ohh I get it.. so that's why it's not firing, the button's function was loaded before the table exists. No wonder nothings happening whatever row I click on the table. Thank you so much! — Kim Taeha, Sep 19 '22 at 05:26
Wait I don't get it, it's not working when I added a dataTable on it...? — Kim Taeha, Sep 19 '22 at 05:38
Nevermind fixed it already, using this answer https://stackoverflow.com/a/34858868/19722580 Again thank you! — Kim Taeha, Sep 19 '22 at 05:45

Why does the button inside of an ajax result in JQueryUI Dialog doesn't fire when clicked?

1 Answers1