动态添加的元素正在强制重新加载

Question

我有一个表格，里面有一系列元素。 我已经注册了一些事件处理程序，并通过注入新的 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>

事件处理程序

 // 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，所以当创建动态元素时，“this”关键字绑定到#asset-table 元素，那么我如何指定哪个我正在为那个活动工作？？

Answer 1

您将拥有多个具有相同 id 的表单，尽管这不是主要问题。您也在听 .assetTitle 而不是 .asset-title 并且您的听众错了，这是主要问题。当你这样做时：

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

jQuery 只会监听 .asset-row 中的表单提交，当监听器被附加时当前存在。以编程方式创建的所有后续带有 .asset-titles（不是 .assetTitle）的 .asset-rows 都没有附加侦听器。相反，您需要将其应用于附加侦听器时存在的元素，然后侦听其中的任何以编程方式创建的元素，如下所示。请注意，我已将 .assetTitle 更改为 .asset-title。

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

Fiddle