0

При первом нажатии на .open, функция отрабатывает нормально, заменяю класс .open на .save после этого нажимаю на .save и меняю обратно на класс .open, тоже все нормально, но вот если повторно обратиться к данному элементу и нажать на .open, то уже не работает. А точнее срабатывает .open и сразу идет .save, то есть открывает все поля и за доли секунд закрывает.

Что я делаю не так?

javascript только начал изучать...

$(document).ready(function() {
  $(".open").click(function() {
    $(this).parent().parent().find(".input_edit").prop('disabled', false);
    $(this).parent().parent().find('.open').addClass('save').removeClass('open');

    $(".save").click(function() {
      $('.answer').html("<div class='success'><b>Успех:</b> Изменение выполнено!</div>");
      $(".input_edit").prop('disabled', true);
      $('.list_button.save').removeClass('save').addClass('open');
      $('.loud_save').css({
        'display': 'none'
      });
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="1" class="table_zebra" style="margin-bottom: 70px;">
  <thead>
    <tr>
      <td colspan="7"><i class="mdi"> </i>Проект перепланировки квартиры</td>
    </tr>
  </thead>
  <tbody class="sortable_tipe ui-sortable" rel="prices">
    <tr id="2">
      <td width="30px">
        | <input type="hidden" class="input_edit" disabled="" name="id" value="2">
      </td>
      <td><i class="mdi <br />
<b>Notice</b>:  Undefined index: ico in <b>D:\Server\data\htdocs\centr-pereplanirovok.loc\admin\templates\prices.php</b> on line <b>19</b><br />
"> </i><input style=" text-align: left" class="input_edit" disabled="" name="name" value="Квартира до 50 м2"></td>
      <td width="30px"><input class="input_edit" disabled="" name="pretext" value=""></td>
      <td width="120px"><input class="input_edit" disabled="" name="price" value="14000"></td>
      <td width="130px"><input class="input_edit" disabled="" name="term" value="10 рабочих дней"></td>
      <td width="30px">
        <a class="list_button open" title="Изменить"><i class="fa fa-pencil" aria-hidden="true"></i>Нажать</a>
      </td>
      <td width="30px">
        <a class="list_button" id="del" title="Удалить" href="#"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
      </td>
    </tr>
    <tr id="3">
      <td width="30px">
        | <input type="hidden" class="input_edit" disabled="" name="id" value="3">
      </td>
      <td><i class="mdi"> </i><input style=" text-align: left" class="input_edit" disabled="" name="name" value="Квартира от 50 до 100 м2"></td>
      <td width="30px"><input class="input_edit" disabled="" name="pretext" value=""></td>
      <td width="120px"><input class="input_edit" disabled="" name="price" value="16 000"></td>
      <td width="130px"><input class="input_edit" disabled="" name="term" value="12 рабочих дней"></td>
      <td width="30px">
        <a class="list_button open" title="Изменить"><i class="fa fa-pencil" aria-hidden="true"></i>Нажать</a>
      </td>
      <td width="30px">
        <a class="list_button" id="del" title="Удалить" href="#"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
      </td>
    </tr>


  </tbody>
</table>

1 ответ 1

1

Когда строился DOM, класс save не регистрировался (его не было) и ловить его надо по нажатию на body (или другого родителя). Так же вы за чем-то слушали save onclick внутри open onclick.

$(document).ready(function() {

  $("body").on('click', '.open', function() {
    $(this).parent().parent().find(".input_edit").prop('disabled', false);
    $(this).toggleClass('save open');
  });

  $("body").on('click', '.save', function() {
    $('.answer').html("<div class='success'><b>Успех:</b> Изменение выполнено!</div>");
    $(".input_edit").prop('disabled', true);
    $('.loud_save').css('display','none');
    $(this).toggleClass('save open');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="1" class="table_zebra" style="margin-bottom: 70px;">
  <thead>
    <tr>
      <td colspan="7"><i class="mdi"> </i>Проект перепланировки квартиры</td>
    </tr>
  </thead>
  <tbody class="sortable_tipe ui-sortable" rel="prices">
    <tr id="2">
      <td width="30px">
        | <input type="hidden" class="input_edit" disabled="" name="id" value="2">
      </td>
      <td><i class="mdi <br />
<b>Notice</b>:  Undefined index: ico in <b>D:\Server\data\htdocs\centr-pereplanirovok.loc\admin\templates\prices.php</b> on line <b>19</b><br />
"> </i><input style=" text-align: left" class="input_edit" disabled="" name="name" value="Квартира до 50 м2"></td>
      <td width="30px"><input class="input_edit" disabled="" name="pretext" value=""></td>
      <td width="120px"><input class="input_edit" disabled="" name="price" value="14000"></td>
      <td width="130px"><input class="input_edit" disabled="" name="term" value="10 рабочих дней"></td>
      <td width="30px">
        <a class="list_button open" title="Изменить"><i class="fa fa-pencil" aria-hidden="true"></i>Нажать</a>
      </td>
      <td width="30px">
        <a class="list_button" id="del" title="Удалить" href="#"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
      </td>
    </tr>
    <tr id="3">
      <td width="30px">
        | <input type="hidden" class="input_edit" disabled="" name="id" value="3">
      </td>
      <td><i class="mdi"> </i><input style=" text-align: left" class="input_edit" disabled="" name="name" value="Квартира от 50 до 100 м2"></td>
      <td width="30px"><input class="input_edit" disabled="" name="pretext" value=""></td>
      <td width="120px"><input class="input_edit" disabled="" name="price" value="16 000"></td>
      <td width="130px"><input class="input_edit" disabled="" name="term" value="12 рабочих дней"></td>
      <td width="30px">
        <a class="list_button open" title="Изменить"><i class="fa fa-pencil" aria-hidden="true"></i>Нажать</a>
      </td>
      <td width="30px">
        <a class="list_button" id="del" title="Удалить" href="#"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
      </td>
    </tr>

  </tbody>
</table>
<div class="answer"></div>

1
  • Кирилл, спасибо большое! Все понятно. Ошибки понял! 21 мая 2018 в 8:33

Ваш ответ

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

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