Bootstrap Modal 未检测到名为按钮的 ajax

Question

我已经解决这个问题 4 个小时了，并决定在这里寻求帮助。非常感谢您的帮助

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

所以主要问题是：当使用按钮更新表格时，我怎样才能让引导程序检测到新按钮，所以按钮将作为模态响应而不是直接指向链接？

模态关闭时：

$('#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>

Answer 1

您需要将该行为委托给表格本身，以便任何子按钮的行为方式相同。一个非常通用且非选择性的示例：http://jsfiddle.net/Kxzt6/

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


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

在 jsfiddle 中，我包含一个按钮，用于在 dom 上插入一个新按钮。如果没有委托，新按钮将不会在控制台记录我们的精彩消息，但由于我们将其委托给桌子，任何孩子#table-button 都会知道如何打招呼。

Answer 2

我建议您仔细阅读 .on() 的文档：

http://api.jquery.com/on/

具体来说这部分：

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