Confirm delete modal/dialog with Twitter bootstrap

Question

A ViewComponent in my ASP.NET Core 1.1 project on VS2015 has a confirm delete modal/dialog with Twitter bootstrap as shown below. But when a user clicks on the Delete button to confirm a delete it does not trigger the jquery function shown below. The modal/dialog pops up fine but when I click on delete button with id= DeleteBtnID inside the modal/dialog I would expect it to popup the `alert('Test') but that is not happening. Question: What I may be missing? No errors are shown in Chrome's Developer Tool.

View that calls ViewComponent:

@model MyProj.Models.TestModel

some html
....
....
<div id="DeleteBtnParentID">
   @await Component.InvokeAsync("TestVC")
</div>

ViewComponent:

@model IEnumerable<MyProj.Models.TestModel>

<table>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                <a asp-action="TestAction">@item.Title</a>
            </td>
            <td>
                <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button>
                <!-- Modal -->
                <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog modal-sm">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h5 class="modal-title modal-sm">Delete Warning</h5>
                            </div>
                            <div class="modal-body">
                                <p>Click 'Delete' to <strong>parmenently</strong> delete this record. Click 'Cancel' to cancel your action.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" id="DeleteBtnID" value="@item.id" data-dismiss="modal">Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    }
</table>
@section scripts
{
   <script>
        $(document).ready(function () {

            $('#DeleteBtnParentID').on('click', '#DeleteBtnID', function (event) {
                alert('Test');
            });
        });
   </script>
}

Snapshot of the page source when I use Chrome's developer toot [You can click on the image for a larger view]:

Answer 1

ANSWER UPDATE

From comment:

Being outside the table will cause the modal's Delete button to not to recognize the attribute value @item.id of since item variable is used in the foreach loop.

A way to solve this point can be:

• attach the value attribute to the button and no more to the modal confirm button
• on modal show event (i.e.: show.bs.modal) get this attribute from button and save it to modal confirm button
• use this attribute when clicking on confirmation button

Updated snippet:

$('#DeleteBtnID').on('click', function (event) {
    console.log('Test: ' + $(this).attr('value'));
});

$('#myModal').on('show.bs.modal', function (e) {
    var btnValue = $(e.relatedTarget).attr('value');
    $('#DeleteBtnID').attr('value', btnValue);
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="@item.id1">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="@item.id2">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="@item.id3">Delete3</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title modal-sm">Delete Warning</h5>
            </div>
            <div class="modal-body">
                <p>Click 'Delete' to <strong>parmenently</strong> delete this record. Click 'Cancel' to cancel your action.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="DeleteBtnID"  data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

From your code:

@foreach (var item in Model)

The IDs must be unique. So, I suggest you to insert in each table cell only the button and move outside the modal, i.e.:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
 ..........
</div>

So, the event will be attached to the unique modal button.

The snippet:

//
// If you need to delegate....
//
$(document).on('click', '#DeleteBtnID', function (event) {
    console.log('delegated Test');
});


$('#DeleteBtnID').on('click', function (event) {
    console.log('Test');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete3</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title modal-sm">Delete Warning</h5>
            </div>
            <div class="modal-body">
                <p>Click 'Delete' to <strong>parmenently</strong> delete this record. Click 'Cancel' to cancel your action.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="DeleteBtnID" value="@item.id" data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Answer 2

you are trying to find DeleteBtnID on the first level under DeleteBtnParentID. try to use find instead, it will search all level that are under DeleteBtnParentID

 $('#DeleteBtnParentID').find("#DeleteBtnID").on('click', function (event) {
     alert('Test');
  });