2

Есть небольшой скрипт, добавляющий строки прайса в пользовательскую таблицу через поле textarea формы заказа. Это нужно для последующей отправки в БД или localStorage.

И есть функция для удаления выбранных строк, если пользователь решит, что погорячился. Эта функция прекрасно работает вне скрипта, отдельно от прочего кода. Но почему-то не работает, будучи добавленной в код jquery ниже.

Также точно, все работает, если в html напрямую прописать код кнопки с классом class="del". Но функция, повешенная на кнопку, тем же скриптом добавляемую, не работает. Подскажите, как исправить?

Спасибо!

Вот хтмл (Таблица прайса):

$('.checkbox').click(function() {
  var tr = $(this).closest("tr").get(0).outerHTML;
  var tr = tr.slice(0, -5);
  var ntr = '<td><button class="del">X</button></td>';
  var end = '</tr>';
  var addtr = tr + ntr + end;

  if ($(this).is(':checked')) {
    var currentVal = $('textarea').val();
    $('textarea.selected').val(currentVal + addtr);
    $a = $('textarea').val();
    $("#rez").append(addtr);
  }
});

$('.del').click(function() { // НЕ РАБОТАЕТ ЭТА ФУНКЦИЯ ПОЧЕМУ-ТО :((
  $(this).closest('tr').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" class="checkbox" name="user_data"></td>
    <td>Ку-ку!</td>
    <td>ля-ля-ля!</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox" name="user_data"></td>
    <td>2Ку-ку!</td>
    <td>ля-ля-ля!</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox" name="user_data"></td>
    <td>3Ку-ку!</td>
    <td>ля-ля-ля!</td>
  </tr>
</table>

<textarea class="selected" type="text" cols="30" rows="5" style="display:none" /></textarea>

<table id="rez"></table>

1 ответ 1

1

$('.checkbox').click(function() {
  var tr = $(this).closest("tr").get(0).outerHTML;
  var tr = tr.slice(0, -5);
  var ntr = '<td><button class="del">X</button></td>';
  var end = '</tr>';
  var addtr = tr + ntr + end;

  if ($(this).is(':checked')) {
    var currentVal = $('textarea').val();
    $('textarea.selected').val(currentVal + addtr);
    $a = $('textarea').val();
    $("#rez").append(addtr);
  }
});

$('#rez').on('click', '.del', function() {
  $(this).closest('tr').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" class="checkbox" name="user_data"></td>
    <td>Ку-ку!</td>
    <td>ля-ля-ля!</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox" name="user_data"></td>
    <td>2Ку-ку!</td>
    <td>ля-ля-ля!</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox" name="user_data"></td>
    <td>3Ку-ку!</td>
    <td>ля-ля-ля!</td>
  </tr>
</table>

<textarea class="selected" type="text" cols="30" rows="5" style="display:none" /></textarea>

<table id="rez"></table>

2
  • Огромное спасибо!!! 18 мая 2020 в 17:50
  • 1
    @Наталья Пожалуйста. Успехов!
    – user176262
    18 мая 2020 в 17:52

Ваш ответ

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

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