Jquery 确认删除模式/对话框，Twitter引导程序不工作

在我的

VS2015

上的

ASP.NET核心1.1

项目中，有一个带有Twitter引导的确认删除模式/对话框，如下所示。但是当用户单击

Delete

按钮确认删除时，它不会触发下面显示的jquery函数。模式/对话框弹出得很好，但当我在模式/对话框中单击带有

id=DeleteBtnID

的删除按钮时，我希望它弹出“警报（'Test'），但这并没有发生。问题：我可能缺少什么？Chrome的开发者工具中没有显示错误

调用ViewComponent的视图：

@model MyProj.Models.TestModel

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

@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>
}

@model MyProj.Models.TestModel
一些html
....
....
@wait Component.InvokeAsync（“TestVC”）

视图组件：

@model MyProj.Models.TestModel

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

@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>
}

@model IEnumerable
@foreach（模型中的var项目）
{
您正在尝试在DeleteBtnParentID下的第一级查找DeleteBtnID。
尝试改用“查找”，它将搜索DeleteBtnParentID下的所有级别

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

答案更新

评论如下：

位于表之外将导致模态的Delete按钮无法识别的属性值@item.id，因为在foreach循环中使用了item变量

解决这一点的方法可以是：


将值属性附加到按钮，不再附加到模式确认按钮
在模态显示事件（即：）上，从按钮获取此属性，并将其保存到模态确认按钮
单击确认按钮时使用此属性

更新的代码段：


$（'DeleteBtnID'）。在（'click'，函数（事件）{
console.log（'Test:'+$（this.attr（'value'））；
});
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var btnValue=$（e.relatedTarget）.attr（'value'）；
$（'#DeleteBtnID'）.attr（'value'，btnValue）；
})

删除1
删除2
删除3
&时代；
删除警告
单击“删除”可正常删除此记录。单击“取消”可取消操作

删除
取消
正如您在我的代码中所看到的，触发模型的
删除
按钮也在
模式
之外。而且，在您的代码中，所有3个按钮的属性\值都完全相同。因此，我可能不理解代码中的某些内容。唯一性在哪里？您能解释一下吗？这是有意义的。但是w我应该将主键值传递给模式的删除按钮吗？位于表之外将导致模式的删除按钮无法识别
@item.id的属性值
@code>，您更新的建议似乎是正确的，但出于某种原因，尽管模式框按预期显示，但
$（'#myModal'）。打开（'show.bs.modal'，函数（e）{alert（'Test'）；
仍然不会触发
alert（'Test'）
。我使用的是Chrome的最新版本，它也不会显示任何错误。代码片段的工作方式是（每次删除时，我都单击modal对话框中的
Delete
按钮）它分别显示：
Test:@item.id1、Test:@item.id2、Test:@item.id3
。我的引导文件是VS2015在项目创建时使用默认的
ASP.NET核心Web应用程序
模板进行默认安装的结果。在我的项目上，显示的版本是Bottstrap 3.3.6。原因请参见我的注释a除此之外，我已经用你的例子单独写了一篇文章。这与ASP.NET Core有什么关系？angular/bootstrap完全在客户端（=浏览器）中运行