Динамически добавленный элемент вызывает перезагрузку - PullRequest
Новая
       8

Динамически добавленный элемент вызывает перезагрузку

0 голосов
/ 22 апреля 2020

У меня есть таблица, в которой есть ряд элементов. Я зарегистрировал некоторые обработчики событий и добавляю эти элементы динамически, добавляя новые html.

Все работает для исходных элементов, но когда я добавляю новый (динамически создаваемый элемент) и запускаю одно из вновь созданных событий обработчики страницы, кажется, заставляют перезагрузить, и я теряю все мои данные / контент.

Вот упрощенная версия: 

               <table id="asset-table" border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr class="asset-row">
                    <td align="center" style="padding-bottom: 32px;">
                      <form id="asset-title" class="asset-title">
                        <input type="text" placeholder="Add Asset Title Here ..." id="title-input1" />
                        <input id="title-submit" class="submit" type="submit">
                      </form>

                      <p id="asset-title-replacement" style="text-align: center; display: none;"><strong></strong></p>
                   </td>
                  </tr>
                </table>

            <button id="add-asset-button">Add Asset</button>

EventHandler 

 // asset title load
  $('#asset-table').on("submit", '.asset-title',  function (event) {
    event.preventDefault();
    console.log("asset-title");
    let text = $(this).find('#title-input1').val();
    let td = $(this).children().first()
    td.find('.asset-title').hide();
    td.find('.asset-title').next('p').text(function () {
      return text
    }).css("font-weight", "Bold");
    td.find('.asset-title').next('p').show()
  });

Добавить новый элемент: 

$('#add-asset-button').click(function () {
    console.log("adding asset");
    $('#asset-table').append("<tr class='asset-row'><td align='center' style='padding-bottom: 32px;'><form id='asset-title' class='asset-title'><input type='text' placeholder='Add Asset Title Here ...' id='title-input1' /><input id='title-submit' class='submit' type='submit'></form><p id='asset-title-replacement' style='text-align: center; display: none;'><strong></strong></p>/td></tr>")
  })

Таким образом, при динамическом добавлении элемента все идет по плану, как только я взаимодействую с добавлением нового «заголовка» и нажимаю кнопку «Отправить», страница перезагружается, и я теряю все «состояние» и содержимое ранее обрабатывались.

Проблема, с которой я столкнулся, заключается в том, что eventHandler привязан к # asset-table, поэтому, когда создается динамический c элемент, ключевое слово «this» привязывается к элемент # asset-table, так как я могу указать, с кем я работаю для этого события ??

1 Ответ

0 голосов
/ 22 апреля 2020

У вас будет несколько форм с таким же идентификатором, как у вас сейчас, хотя это не главная проблема. Вы также слушаете .assetTitle, а не .asset-title, и ваш слушатель не прав, что является основной проблемой. Когда вы это сделаете: 

 $('.asset-row').on("submit", '.assetTitle',  function (event) {
   ...
 })

jQuery будет прослушивать только отправку формы в .asset-строке, которая в данный момент существует, когда подключен слушатель. Все ваши последующие .asset-строки с .asset-заголовками (не .assetTitle), созданные программно, не имеют подключенных слушателей. Вместо этого вам нужно применить его к элементу, который присутствует при подключении слушателя, а затем прослушать любые программно созданные элементы внутри него, например, так. Обратите внимание, что я изменил .assetTitle на .asset-title. 

 $('#asset-table').on("submit", '.asset-title',  function (event) {
    ...
 })

Скрипка

...