Модальный диалог для подтверждения удаления

Question

Я следую за этим (Bootstrap modal to confirm table row delete), но я не уверен, почему, но модальный диалог не появляется.

Я ищу в основном, делают то же самое, хотя моя таблица динамически создается мой JQuery код:

$("#guests_table > tbody:last").append(
    "<tr class='btnDelete' data-id='" + guest.guest_id + "'>" 
    + "<td>" + guest.guest_first_name + "</td>" 
    + "<td>" + guest.guest_last_name + "</td>" 
    + "<td>" + guest.guest_email + "</td>" 
    + "<td>" + "<a href='editguest.html?guestId=" + guest.guest_id + "&hostId=" + hostId + "&registryId=" + guest.registry_id + " '>" 
    + "<img src='images/edit26.png' height='60%' width='60%'></a></td>" 
    + "<td><button class='btnDelete' href=''>delete</button></td>" 
    + "</tr>"); 
}); 

В главе HTML страницы:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 

модальный диалог :

<!-- start: Delete Coupon Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" 
        aria-hidden="true">&times;</button> 
       <h3 class="modal-title" id="myModalLabel">Warning!</h3> 

      </div> 
      <div class="modal-body"> 
       <h4>Are you sure you want to DELETE?</h4> 

      </div> 
      <!--/modal-body-collapse --> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-danger" id="btnDelteYes" href="#">Yes</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
      </div> 
      <!--/modal-footer-collapse --> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

Кнопка вызовов в странице JS:

$('btn.btnDelete').on('click', function (e) { 
    e.preventDefault(); 
    var id = $(this).closest('tr').data('id'); 
    $('#myModal').data('id', id).modal('show'); 
}); 

$('#btnDelteYes').click(function() { 
    var id = $('#myModal').data('id'); 
    $('[data-id=' + id + ']').remove(); 
    $('#myModal').modal('hide'); 
}); 

При удалении У меня есть вызов API для удаления, но я просто пытаюсь заставить диалог даже появиться. Любая идея почему?

Спасибо

Answer 1

Проблема с селектором CSS, когда вы связываете удалить кнопку щелчка событие. Это должно быть .btn.btnDelete, примечание . спереди или ему.

$('.btn.btnDelete').on('click', function (e) { 
    e.preventDefault(); 
    var id = $(this).closest('tr').data('id'); 
    $('#myModal').data('id', id).modal('show'); 
}); 

Кроме того, убедитесь кнопку удаления имеет класс btn для этой работы:

<button class='btn btnDelete' href=''>delete</button> 
<!-- add btn^class --> 

Демо:http://plnkr.co/edit/X2hybmfUXGlFlaoFX4Al?p=preview