jQuery - Почему эта переменная не теряет своего значения после выполнения функции?

#javascript #jquery #datatables

#javascript #jquery #таблицы данных

Вопрос:

Я новичок в jQuery и пытаюсь определить функцию jQuery с целью редактирования строки таблицы: модальный запрашивает новые значения, а затем функция обновляет содержимое строки таблицы. Но когда я выбираю строку, которую хочу отредактировать, переменная, в которой была сохранена строка, «аккумулирует» все предыдущие строки, которые были отредактированы в том же объекте, и когда я пытаюсь обновить новые значения для этой единственной строки, все строки, отредактированные ранее, получают и показывают одно и то же значение. Почему это происходит?

Я покажу вам код:

 $("#table").on("click", ".edit", function() {
  var table = $("#table").DataTable();
  var row = $(this).closest("tr");
  //getting the <tr> content with Datatables API:         
  var values = $table.row(row).data();

  $("#name").val(values[0]);
  $("#surname").val(values[1]);
  $("#city").val(values[2]);
  $("#myModal .modal-footer").on("click", "#confirm", function() {
    var newValues = []
    //getting the <tr> content with Datatables API: 
    //this alert appears as many time as many rows have been changed  
    alert($table.row(row).data());
    //deleting the old data from the server...
    //getting the new values:
    newValues.push($("#name").val());
    newValues.push($("#surname").val());
    newValues.push($("#city").val());
    //adding the new date to the server...
    $("#myModal").modal("hide");
    //update the html table:
    table.row(row).data([newValues[0], newValues[1], newValues[2]]);
  });
});

Как я объяснял ранее, переменная «row» в .on("click")
функция «аккумулирует» все строки, которые были отредактированы ранее.
Я думал, что это проблема области видимости, поэтому я также попытался вызвать внешнюю функцию, которая в основном делала то же самое и использовала преимущества event.data объекта:

$("#confirm").on("click", {table: table, row: row}, edit);

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

1. Вы добавляете обработчик событий внутри другого обработчика событий, что почти всегда неправильно. Вызов .on() не удаляет ранее добавленные обработчики, поэтому все они по-прежнему будут вызываться при последующих событиях.

2. Спасибо за ответ, итак, если обновление моей таблицы зависит от событий двух щелчков, что вы предлагаете? Использование .click() вместо .on() или мой подход совершенно неверен?

Ответ №1:

Вы должны использовать две разные и независимые функции, используя внешнюю переменную для их соединения; вы не можете использовать .on() вложенным способом