0

Брал пример отсюда: http://jsfiddle.net/4f0331ss/1/. После нажатия кнопки save ничего не происходит. Прошу подсказать, в чем моя ошибка.

$(function() {
    var inpMin = '<input class="input-mini">',
    butMin = '<button type="submit" class="save">save</button>';
    $('table').on('click', 'td', function(e) {        
      var $that = $(this);
      if($that.hasClass('edited')) return false;
      $that.html($(inpMin).val($that.text())).append(butMin)
      .addClass('edited');
    });
    $('table td').on('click', '.save', function() {
      var $that = $(this);
      $that.parent('td').text($that.siblings('.input-mini').val())
      .removeClass('edited');
    });
});

Таблица динамическая, выводится через innerHTML.

7
  • а что должно происходить? у меня в примере по кнопке save значение введенное показывается а поле вода и кнопка убираются
    – Grundy
    7 дек 2015 в 19:50
  • Поле ввода с кнопкой не исчезают.
    – endless
    7 дек 2015 в 19:53
  • а пример у вас работает?
    – Grundy
    7 дек 2015 в 19:53
  • на том сайте да, локально - увы
    – endless
    7 дек 2015 в 19:54
  • а вся остальная разметка и css та же самая?
    – Grundy
    7 дек 2015 в 19:54

1 ответ 1

1

Проблема в том, что таблица генерируется динамически, а подписка на событие по клику кнопки

$('table td').on('click', '.save', function() {

предполагает что все ячейки уже доступны.
Для решения, нужно воспользоваться тем же подходом, что и для кликов по ячейке

$('table').on('click', 'td .save', function(e) { 

Кроме того, теперь необходимо прервать всплытие события по кнопке save чтобы не заходить опять в обработчик клика по ячейке. для этого можно просто вернуть false из функции обработчика.
Конечный пример:

$(function() {

  var inpMin = '<input class="input-mini">',
    butMin = '<button type="submit" class="save">save</button>';
  $('table').on('click', 'td', function(e) {
    console.log('td click');
    var $that = $(this);
    if ($that.hasClass('edited')) return false;
    console.log('td click', 'not edited');
    $that.html($(inpMin).val($that.text())).append(butMin)
      .addClass('edited');
  });
  $('table').on('click', 'td .save', function() {
    console.log('save click');
    var $that = $(this);
    var siblings = $that.siblings('.input-mini');
    console.log('save click', 'siblings', siblings.length, 'val', siblings.val());
    $that.parent('td').text(siblings.val())
      .removeClass('edited');
    return false;

  });



  $('table').html(`<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>`)
})
table {
    width: 50%;
}
td {
    padding: 5px;
}
.input-mini {
    display: block;
    margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1"></table>

2
  • Здравствуйте! :) Спустя долгое время снова понадобилась Ваша помощь, вероятно помните, с чем Вы помогли, если будет время, черкните ответ.) Нужно отлавливать нажатия на две кнопки внутри одной ячейки(разные функции), как это можно реализовать? Сам пытался не раз, но не получалось, хотя кажется, что это довольно просто. <td><button type='button' class='btn btn-default user'><span class='glyphicon glyphicon-user'></span></button><button type='button' class='btn btn-default delete'><span class='glyphicon glyphicon-trash'></span></button></td> P.S. если нужно, могу оформить вопросом.
    – endless
    27 фев 2016 в 18:47
  • 1
    @endless, да, лучше отдельным вопросом, но не пойму в чем проблема? раньше добавляли обработчик на td, а теперь добавляйте на button так же
    – Grundy
    27 фев 2016 в 19:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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