Question

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

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

所以主要的问题是：当用按钮更新表时，如何让bootstrap检测新按钮，这样按钮会作为模态响应，而不是直接转到链接？

当模态结束时：

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

我建议你仔细阅读.on（）的doucmentation：

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

特别是这部分：

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

Answer 2

您需要将该行为委托给表本身，以便任何子按钮的行为方式相同。一个非常通用且非选择性的示例：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都会知道怎么说你好。

Bootstrap Modal没有检测到被称为按钮的ajax

2 个答案: