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

Question

I've been fighting this issue for 4 hours now, and decided to seek help here. Help is much appreciated

Got a page where i've set up a table with information and buttons. The buttons starts up a modal from bootstrap, which allows the user to edit the tables information. When the user is done editing, the modal closes, and the table is updated, using ajax. All works as intended, right until the table is updated by ajax. The buttons on the updated table are replaced on the ajax call as well, and my theory is that when clicking on the replaced buttons, javascript cannot detect the new buttons.

So the main issue is: When updating a table with buttons, how can i make bootstrap detect the new buttons, so the buttons will respond as modals and not head directly to the link?

When modal is closing:

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

        })

ajax call on table:

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

inside 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

I suggest you read the doucmentation for .on() very closely:

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

Specifically this part:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

Answer 2

You would need to delegate that behavior to the table itself, so that any children buttons would behave the same way. A very generic and non-selective example: 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>

In the jsfiddle I include a button to insert a new button onto the dom. Without delegation that new button would not console log our wonderful message, but since we delegated it to the table any children #table-button's would know how to say hello.