Не срабатывает повторно функция .click

234

30 мая 2018, 18:20

При первом нажатии на .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>

Answer 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>