Javascript 引导模式未检测到称为按钮的ajax

我已经为这个问题争论了4个小时，决定在这里寻求帮助。非常感谢你的帮助

有一个页面，我在其中设置了一个包含信息和按钮的表格。这些按钮从引导启动一个模式，允许用户编辑表格信息。用户完成编辑后，模式关闭，并使用ajax更新表。在ajax更新表之前，所有操作都按预期进行。更新表上的按钮在ajax调用中也会被替换，我的理论是，当单击替换的按钮时，javascript无法检测到新的按钮

所以主要的问题是：当用按钮更新一个表时，我如何让引导程序检测新的按钮，这样按钮将作为模态响应，而不是直接指向链接

当modal关闭时：

$('#testModal').on('hidden.bs.modal', function () {
            calc();
            users();

        })

表上的ajax调用：

function users(){
      $.ajax({ 
        type  :   "POST", 
        url   :   "/users.php", 
        data  :   regning })
      .done(function( data ) {
        $('#users').html(data);
      });
    }

在users.php内部：

<div class="span4 offset2">
                    <h2>Regnskab</h2>
                    <div style="background-color: white; border: 1px solid lightgrey; border-radius: 5px; margin-bottom: 10px;">
                            <table>
                                <?php
                                $totalamount = 0;
                                $participants = 0;
                                while($row = mysqli_fetch_object($users)):?>
                                <?php $spendings = $db->get_spendings($regning, $row->user_id);?>
                                <tr <?php if(mysqli_num_rows($spendings) == 0){ echo "style='border-bottom: 1px solid lightgrey;'";} ?>>
                                  <td class='span2 spendingname_responsive'>
                                      <a href="/edit_user.php?user_id=<?php echo $row->user_id."&p=".$bill_code."&bill_id=".$regning ?>" id="ajax" role="button" style="text-decoration: none;"><h4 style="margin-top: 0px; margin-bottom: 0px;"><?php echo $row->user_name; ?></h4></a>
                                  </td>
                                  <?php $totalamount1 = $db->get_totalamount_user($row->user_id);?>
                                  <td class='span2 spendingamount_responsive' style='text-align: right; color: #1ABC9C;'>
                                      <?php echo $totalamount1->spendings." kr."; ?>
                                  </td>
                                  <td class='span1' style='text-align: right;'>
                                    <a href="/new_spending.php?bill_id=<?php echo $regning."&user_id=".$row->user_id."&p=".$bill_code ?>" id="ajax" role="button" class="btn btn-primary"><i class="fui-plus-16"></i></a>
                                  </td>
                                </tr>
                                 <?php 
                                 $rowspendnum = 1;
                                 $rowsspendings = mysqli_num_rows($spendings);
                                 while($innerrow = mysqli_fetch_object($spendings)):?>
                                <tr 
                                <?php
                                if($rowsspendings == 1){
                                    echo "style='border-bottom: 1px solid lightgrey;';";
                                }
                                else if($rowsspendings == $rowspendnum){
                                    echo "style='border-bottom: 1px solid lightgrey;';";
                                }
                                ?>
                                >
                                    <td class='span2 spendingname_responsive' style="padding-top: 0px;">
                                        <?php echo $innerrow->spending_name; ?>
                                    </td>
                                    <td class='span2 spendingamount_responsive' style='text-align: right; padding-top: 0px;'>
                                        <?php echo $innerrow->spending_amount." kr."; ?>
                                    </td>  
                                    <td class='span1' style='text-align: right; padding-top: 0px;'>
                                        <a href="/edit_spending.php?spending_id=<?php echo $innerrow->spending_id."&p=".$bill_code ?>" id="ajax" role="button" class="btn btn-default"><i class="fui-settings-16"></i></a>
                                    </td>
                                </tr>
                                <?php 
                                $rowspendnum++;
                                endwhile ?>
                                <?php $totalamount = $totalamount + $totalamount1->spendings; ?>
                                <?php $participants++; ?>  
                                <?php endwhile ?>
                            </table>
          <?php $average = $totalamount/$participants; ?>
        </div>
          <a href="/new_user.php?bill_id=<?php echo $regning."&p=".$bill_code ?>" id="ajax" role="button" class="btn btn-primary btn-block" style="border-radius: 5px; padding: 6px 12px;">
              Tilføj person
          </a>
</div>

雷根斯卡布

我建议您仔细阅读.on（）的说明：

具体而言，本部分：

事件处理程序仅绑定到当前选定的元素；他们 在代码调用.on（）时页上必须存在。 要确保元素存在并且可以选择，请执行事件 在文档就绪处理程序中为 页面上的HTML标记。如果新的HTML被注入到页面中， 选择元素并在创建新HTML后附加事件处理程序 放入页面中。或者，使用委派事件附加事件 处理程序，如下所述

---

您需要将该行为委托给表本身，以便任何子按钮的行为都相同。一个非常通用且非选择性的示例：

$（'table'）。在（'click'，'table button'，函数（e）{
e、 预防默认值（）
log（“你好！”）
})
你好

---

在JSFIDLE中，我包含了一个按钮，用于在dom中插入一个新按钮。如果没有委托，new button将无法控制台记录我们的精彩消息，但由于我们将其委托给了表，因此任何子表#table button都会知道如何打招呼。

当您第一次运行jquery绑定到新dom元素时，新dom元素可能不存在。因此，再次尝试运行jquery.on（），看看jquery.on（）是否应该在代码中提供帮助？

$('table').on('click', '#table-button', function(e){
  e.preventDefault()
  console.log("hello!")
})


<table>
  <td><button id="table-button">Hi!</button></td>
<table>