1

Сейчас работаю с таблицами, с возможностью редактирования данных с использованием ajax. Для этого при помощи jQuery при клике на кнопку меняю ее иконку (для этого изменяется id и class). После я должен кликнуть на этот элемент (сохранить) и кнопка должна вернуть первоначальный вид (снова сменить id и class).
Но проблема в том, что второй раз событие клика не срабатывает, хотя я даже элемент не удаляю, а просто меняю его атрибуты. Естественно, прогуглив что для этого есть второй вид клика, его я и использовал:

/* Events after clicking on edit button */
$("button[id^='editRow']").on('click', function () {
   /* Get id of row */
   var rowId = $(this).attr('id');

   var newRowId = rowId.replace('edit', "save");

   /* Change icon and style of button */
   $(this).find('span').attr('class', 'glyphicon glyphicon-ok');

   /* Set new id for saving data */
   $(this).attr('id', newRowId);
});


/* Events after clicking on save button */
$("table").on('click', "[id^='saveRow']", function () {
  $(this).find('span').attr('class', 'glyphicon glyphicon-pencil');
});

События клика срабатывает, но почему то два раза. Первый после присваивания нового id и второй после клика. Этого допускать нельзя, так как выйдет два раза сохранение в бд.

4
  • а зачем менять id?
    – Grundy
    28 июн 2016 в 14:30
  • @Grundy чтобы срабатывало второе событие, save, а не edit.
    – vellmur
    28 июн 2016 в 14:31
  • 1
    Назначайте обработчики по классам и проблем не будет :)
    – Grundy
    28 июн 2016 в 14:33
  • @Grundy пока не совсем понимаю как это реализовать, чтобы различать какая кнопка нажата и какой id у строки.
    – vellmur
    28 июн 2016 в 14:38

1 ответ 1

3

From Grundy:

Назначайте обработчики по классам и проблем не будет :)

/* Events after clicking on edit button */
$("table").on('click', '.glyphicon-pencil', function () {
   $(this).removeClass('glyphicon-pencil');
   $(this).addClass('glyphicon-ok');
});

/* Events after clicking on save button */
$("table").on('click', '.glyphicon-ok', function () {
   $(this).removeClass('glyphicon-ok');
   $(this).addClass('glyphicon-pencil');
});
.glyphicon-pencil
{
  width:150px;
  height:50px;
  background-color:blue;
}

.glyphicon-ok
{
  width:150px;
  height:50px;
  background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1" cellspacing="2" cellpadding="2">
  <tr>
    <td><div class="glyphicon-pencil"></div></td>
  </tr>
  <tr>
    <td><div class="glyphicon-ok"></div></td>
  </tr>
</table>

3
  • 1
    можно чуть более говорящие классы типа save, edit, но идея уловлена верно :)
    – Grundy
    28 июн 2016 в 14:40
  • @Igor Спасибо, все отлично работает, осталось только понять, почему срабатывает то с первого нажатия, то с пятого, а так работает)
    – vellmur
    28 июн 2016 в 14:55
  • @Igor Хотя уже понял, срабатывает когда на span попадаешь мышкой) Еще раз спасибо.
    – vellmur
    28 июн 2016 в 15:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.