Невозможно установить onclick в загруженной таблице AJAX

Question

На самом деле на моем веб-сайте я строю временную шкалу от AJAX, и я пытался установить клик на каждой строке таблицы.

Я использовал селектор класса, но эффект был ничем. На самом деле я прочитал в другом сообщении stackoverflow, что мне нужно было установить onclick на ближайший статический элемент, но ничего.

Итак, я попробовал

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

и

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

На самом деле код AJAX, где я создаю временную шкалу, выглядит следующим образом

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);
        }
    });
}

Так что может быть лучшим методом для установки onclick на класс строки таблицы?

Вот JSFiddle о том, как построить временную шкалу

Answer 1

Вы должны установить событие клика после того, как строки помещены в таблицу.Так что поместите ваш $(".table-row").click(function () { alert("we"); }); код в конец функции успеха.

Answer 2

Вы пробовали

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

Answer 3

Вы можете попробовать это

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