Не происходит событие onclick для запуска из программно созданной таблицы

Question

У меня есть таблица, которая программно добавляется с событием onclick, которое вызывает определенную функцию javascript с идентификатором строки, которую я хочу редактировать. Однако это не называется. Я попытался изменить кнопку, добавив класс и пытаясь получить что-то там, но это не работает. Раньше это работало, и я не могу понять, почему или как это исправить.

function buildTable() {
$.ajax({
    url: "getTable.php",
    dataType: "json",
    success: function(result) {
        if (result != null) {
            $('#measurements tbody tr').remove();
            result.forEach(function (measurement) {
                var message = "<tr><td>" + dateFromtimestamp(measurement.weigh_date) + "</td>";;
                message += "<td>" + measurement.weight + "</td>";
                message += "<td><input type='hidden' value='" + measurement.id + "'>" + measurement.waist + "</td>";
                message += "<td>" + measurement.upperBp + "</td>";
                message += "<td>" + measurement.lowerBp + "</td>";
                message += "<td>" + measurement.comment + "</td>";
                message += "<td><button type='button' class='btn btn-outline-warning' onlick='editRow(" + measurement.id + ")'>";
                message += "<span class='glyphicon glyphicon-pencil'></span></button>&nbsp;";
                message += "<button type='button' class='btn btn-outline-danger' onlick='removeRow(" + measurement.id + ")'>";
                message += "<span class='glyphicon glyphicon-remove'></span></button></td></tr>";
                $('#measurements').append(message);
            });
        }
    }
});

}

Ниже приведена таблица HTML, к которой она добавляется:

<div class="panel panel-info">
<div class="panel-heading text-center">Past measurements</div>
<div class="panel-body">
    <table class="table table-striped" id="measurements">
        <thead class="thead-dark">
        <th scope="col">Date</th>
        <th scope="col">Weight</th>
        <th scope="col">Waist</th>
        <th scope="col">Systolic (Upper)</th>
        <th scope="col">Diastolic (Lower)</th>
        <th scope="col">Comment</th>
        <th scope="col">Action</th>
    </thead>
        <tbody>
    </tbody>
     </table>
     <div class="row">&nbsp;</div>
 </div>
 </div>

Это рассматриваемая функция редактирования на тот случай, если я что-то упустил с сигнатурой аргумента:

function editRow(id) {
    $.ajax({
        url: "getMeasurement.php",
        type: "post",
        dataType: "json",
        data: {
            "id": id
        },
        success: function(data) {
            if (data != null) {
            data.forEach(function(result){
                var id = result.id;
                $('#editMeasurement').modal('show');
                $('#editupper').val(result.upperBp);
                $('#editlower').val(result.lowerBp);
                    $('#editwaist').val(result.waist);
                    $('#editweight').val(result.weight);
                    $('#editcomment').text(result.comment);
                    $('#editRowHidden').val(id);
        });             
    }
    }   
});
}

Я попытался изменить кнопку, добавив класс: и пытаясь перехватить событие с помощью $ ('.editRow'). on ("click", function () {} событие с теми же результатами.

Answer 1

Прежде всего, я согласен с @ dmitrii-g, что вы должны использовать event-Delegation , чтобы иметь возможность обрабатывать любые события в элементах, которые были добавлены после рендеринга DOM. (добавлено динамически). После этого вы должны попытаться отладить / распечатать на консоли любую информацию, необходимую для того, чтобы убедиться, что вы передаете правильные значения в свою функцию. Я подготовил пример, который продемонстрирует этот подход:

const result = [{
    weigh_date: '01/01/2019',
    weight: '200lbs',
    id: 1,
    waist: 'waist',
    upperBp: 'upperBp',
    lowerBp: 'lowerBp',
    comment: 'comment'
  },
  {
    weigh_date: '01/01/2015',
    weight: '100lbs',
    id: 2,
    waist: 'waist',
    upperBp: 'upperBp',
    lowerBp: 'lowerBp',
    comment: 'comment'
  }
];

function buildTable() {
  if (result != null) {
    $('#measurements tbody tr').remove();
    result.forEach(function(measurement) {
      var message = "<tr><td>" + measurement.weigh_date + "</td>";
      message += "<td>" + measurement.weight + "</td>";
      message += "<td><input type='hidden' value='" + measurement.id + "'>" + measurement.waist + "</td>";
      message += "<td>" + measurement.upperBp + "</td>";
      message += "<td>" + measurement.lowerBp + "</td>";
      message += "<td>" + measurement.comment + "</td>";
      message += "<td><button type='button' class='btn btn-edit btn-outline-warning' id='" + measurement.id + "'>Edit</button>&nbsp;";
      message += "<button type='button' class='btn btn-delete btn-outline-danger' id='" + measurement.id + "'>Remove</button></td></tr>";
      $('#measurements').append(message);
    });
  }
}

$('#measurements').on('click', '.btn-edit', function() {
	const id = $(this).attr('id');
	
	console.log('ID to be edited: ' + id);
  // your stuff here
});


$('#measurements').on('click', '.btn-delete', function() {
	const id = $(this).attr('id');
	
	console.log('ID to be deleted: ' + id);
    // your stuff here
});


buildTable();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-info">
  <div class="panel-heading text-center">Past measurements</div>
  <div class="panel-body">
    <table class="table table-striped" id="measurements">
      <thead class="thead-dark">
        <th scope="col">Date</th>
        <th scope="col">Weight</th>
        <th scope="col">Waist</th>
        <th scope="col">Systolic (Upper)</th>
        <th scope="col">Diastolic (Lower)</th>
        <th scope="col">Comment</th>
        <th scope="col">Action</th>
      </thead>
      <tbody>
      </tbody>
    </table>
    <div class="row">&nbsp;</div>
  </div>
</div>

Answer 2

Благодаря кмгт. Если бы это была змея, она бы меня укусила. Необходимо использовать «onclick» вместо «onlick».

Answer 3

У вас есть опечатка onlick вместо onclick.

Кроме того, вы можете использовать пассивный прослушиватель событий как:

$(document).on("click", <target>,<your function>});

, где <target> - селектор jquery для вас и <your function> ваш обратный вызов.

Это повысит читабельность и поможет сохранить разделение между HTML и JS. А также работает для динамически вставленных целей.

Answer 4

попробуйте

$(document).on("click","tr",function() {
    console.log(this,"click");
});