html / jquery - форма не отправляется, когда она проходит через несколько таблиц

Question

Я добавляю строку динамически в мою HTML-таблицу, которая содержит форму с идентификатором "update", при отправке я хочу отправить значения из множественного выбора с идентификатором #myselect и textarea с идентификатором "#note".Я также использую загрузчик для стилизации своих элементов документа.

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

Форма "# deleteit" работает нормально, но "#update" ничего не делает при отправке

$('#mytable > tbody').append("<tr><td>1</td><td>name</td><td><form id='update'><select multiple class='form-control' id='myselect' name='myselects'><option>test1</option><option>test2</option></select></td><td><textarea class='form-control' id='note' name='notes' rows='3'></textarea></td><td><button type='submit' class='btn btn-info btn-sm'>update</button></form></td><td><form id='deleteit' method='post'><button type='submit' class='btn btn-danger btn-sm'>delete</button></form></td></tr>");

$(document).on('submit', '#update', function(e) {
  alert("update form submitted")
  return false
});

$(document).on('submit', '#deleteit', function(e) {
  alert("delete form submitted")
  return false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>

  </tbody>
</table>

Answer 1

Ваш HTML-код недействителен.

Замените его следующим:

<tr>
  <td>1</td>
  <td>name</td>
  <td>
    <form id='update'>
      <select multiple class='form-control' id='myselect' name='myselects'>
        <option>test1</option>
        <option>test2</option>
      </select> 
      <textarea class='form-control' id='note' name='notes' rows='3'></textarea> 
      <button type='submit' class='btn btn-info btn-sm'>update</button> 
    </form>
  </td>
  <td>
    <form id='deleteit' method='post'><button type='submit' class='btn btn-danger btn-sm'>delete</button></form>
  </td>
</tr>

И ваше событие обновления будет запущено.

Рабочий пример:

<table id="mytable">
  <tbody>

  </tbody>
</table>

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

<script>
  $('#mytable > tbody').append("<tr><td>1</td><td>name</td><td> <form id='update'> <select multiple class='form-control' id='myselect' name='myselects'> <option>test1</option> <option>test2</option> </select> <textarea class='form-control' id='note' name='notes' rows='3'></textarea> <button type='submit' class='btn btn-info btn-sm'>update</button> </form> </td><td> <form id='deleteit' method='post'><button type='submit' class='btn btn-danger btn-sm'>delete</button></form> </td></tr>");

  $(document).on('submit', '#update', function(e) {
    alert("update form submitted");
    return false;
  });

  $(document).on('submit', '#deleteit', function(e) {
    alert("delete form submitted");
    return false;
  });
</script>