CODEWITHSUNDEEP
javascriptajax
NiceToMytyuk
NiceToMytyuk

Reputation: 4307

Unable to set onclick in AJAX loaded table

Actually in my website i'm building a timeline from AJAX and i was trying to set the onclick on each table row.

I was using class selector but the effect was nothing. I actually read in another stackoverflow post that i had to set onclick on the closest static item but nothing.

So i've tryed

$(".timeline").on("click","table-row",function () { alert("we") ;});

and 

$(".table-row").click(function () { alert("we"); });

Actually AJAX code where i create the timeline is the following

function createTavoli(salaSelect) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/getTavoli",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            data = r.d;
            data = $.parseJSON(data);
            var count = 0;
            var time = [];
            $.each(data, function (i, item) {
                var tabs = [];
                var numtav = item.NUM_TAV;
                var desctav = item.DESC_T;
                var coperti = item.COPERTI;
                var sala = item.SALA;


                if (sala == salaSelect) {
                    tabs.push('<tr id="' + numtav + '" data-salatav="' + sala + '" class="table-row">');
                    if (desctav != "") {
                        tabs.push('<th scope="row" class="noselect row-head text-left">' + desctav + '<span class="badge badge-dark ml-1">' + coperti + '</span></th>');
                    } else {
                        tabs.push('<th scope="row" class="noselect row-head text-left">' + "T. " + numtav + '<span class="badge badge-dark ml-1">' + coperti + '</span></th>');
                    }

                    for (var i = 0; i <= 95 - Range; i++) {
                        tabs.push('<td style="padding: 0px; position: relative; z-index: 1;"></td>');
                    }
                    tabs.push('</tr>');
                    count++;
                    $('#timeline').append(tabs.join(""));
                }
                });

            time.push('<th scope="col" style="padding: 0px; border: 0; width: 80px;" class="row-head"></th>');
            for (var i = PartenzaOra; i <= 23; i++) {
                time.push('<th style="padding: 0px; border: 0; z-index: 3;" scope="colgroup" colspan="4"><p class="h noselect">' + ('0' + i).slice(-2) + '</p></th>');
            }
            $('#timehead').append(time.join(""));
            $('#counttav').text(count);
            getTavoli(new Date());
        },
        error: function (xhr, status, errorThrow) {
            alert(xhr.status + " " + xhr.responseText);
        }
    });
}

So which could be the best method to set onclick on the table-row class?

Here is JSFiddle of how's build the timeline

Upvotes: 1

Views: 88

Answers (3)

Abhishek Desai
Abhishek Desai

Reputation: 136

you can try this

$('body').on("click", ".table-row" , function() {
    alert("we");
});

Upvotes: 0

Burak
Burak

Reputation: 194

You should set click event after rows pushed to table. So put your $(".table-row").click(function () { alert("we"); }); code to end of success function.

Upvotes: 2

Ramshid
Ramshid

Reputation: 78

Did you tried 

$(document).on("click", ".timeline .table-row" , function() {
  alert("we");
});

Upvotes: 2

Related Questions