break ajax generierte Tabelle beim Klicken mit jquery

Question

Meine Tabelle mit Ajax generiert. Nachdem ich auf eine Zeile geklickt habe, möchte ich diese Tabelle aufbrechen und etwas Inhalt (eine weitere Tabelle in der Zukunft) in diese Lücke einfügen. Aber es bricht nicht mit meinem Ajax.

here is problem

Aber mit dem gleichen html und ohne Ajax funktioniert es ok.

how it should be

Mein HTML-Code:

<div class="table-responsive"> 
<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th>Date</th> 
      <th>D. Bef.</th> 
      <th>D. Aft.</th> 
      <th>Note</th> 
      <th>Addr.</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody class="client-orders"> 
     <?php foreach ($orders as $order) : ?> 
      <tr id="order-row-<?=$order['order_id']?>"> 
       <td> 
        <input id="data-<?=$order['order_id']?>"> 
       </td> 
       <td contenteditable="true"><?=$order['debt_payment']?></td> 
       <td contenteditable="true"><?=$order['debt_current']?></td> 
       <td contenteditable="true"><?=$order['order_note']?></td> 
       <td contenteditable="true"><?=$order['address_id']?></td> 
       <td> 
        <button type="button" class="btn btn-outline btn-danger"></button> 
        <button type="button" class="btn btn-outline btn-info btn-show-details" 
          id="details-btn-<?=$order['order_id']?>" 
          order-id="<?=$order['order_id']?>">details 
        </button> 
       </td> 
      </tr> 


      <!--BREAK PUT HERE--> 


    <?php endforeach ?> 
    </tbody> 
</table> 

und javascript:

// this ajax shows previous html content (just for case) 
    $.ajax({ 
    url: 'Views/ajax_php/orders.php', 
    method: 'post', 
    data: {clientId: clientId}, 
    success: function (data) { 
     $('#orders').after(data); 
    } 
}); 

var orderId; 
$(document).one('ajaxStop', function() { 
    $('.btn-show-details').on('click', function() { 
     orderId = $(this).attr('order-id'); 
     // here I insert closing tag, put <p> and open table again 
     $('\ 
     </tbody>\n\ 
    </table>\n\ 
</div>\n\ 
<p> text row row row row row row row row row row row row </p>\n\ 
<div class="table-responsive">\n\ 
    <table class="table table-hover">\n\ 
     <thead>\n\ 
      <tr>\n\ 
       <th>Date</th>\n\ 
       <th>D. Bef.</th>\n\ 
       <th>D. Aft.</th>\n\ 
       <th>Note</th>\n\ 
       <th>Addr.</th>\n\ 
       <th></th>\n\ 
      </tr>\n\ 
     </thead>').insertAfter($('#order-row-' + orderId)); 

Answer 1

Möglicherweise wird diese Arbeit:

 $.ajax({ 
    url: 'Views/ajax_php/orders.php', 
    method: 'post', 
    data: {clientId: clientId}, 
    success: function (data) { 
     $('#orders').after(data); 
    } 
}); 

var orderId; 
$(document).one('ajaxStop', function() { 
    $('.btn-show-details').on('click', function() { 
     orderId = $(this).attr('order-id'); 
     // here I insert closing tag, put <p> and open table again 
     $('\ 
     <p> text row row row row row row row row row row row row </p>\n\ 
     <thead>\n\ 
      <tr>\n\ 
       <th>Date</th>\n\ 
       <th>D. Bef.</th>\n\ 
       <th>D. Aft.</th>\n\ 
       <th>Note</th>\n\ 
       <th>Addr.</th>\n\ 
       <th></th>\n\ 
      </tr>\n\ 
     </thead>').insertAfter($('#order-row-' + orderId)); 

Sie sollten zuerst diese Spalte und Zeile und dann ganze Tabelle brechen.