我ASP.NET Core 1.1
VS2015
项目中的ViewComponent与Twitter引导程序有一个确认删除模式/对话框,如下所示。但是当用户单击Delete
按钮确认删除时,它不会触发下面显示的jquery函数。模态/对话框弹出正常,但当我在模态/对话框中单击带有id= DeleteBtnID
的删除按钮时,我希望它会弹出`alert('Test')但是没有发生。问题:我可能缺少什么? Chrome的开发者工具中没有显示任何错误。
查看调用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">×</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>
}
当我使用Chrome的开发人员toot时,页面源的快照 [您可以点击图片查看大图]:
答案 0 :(得分:3)
答案更新
来自评论:
在表格之外将导致模态的删除按钮不识别属性值@ item.id,因为在foreach循环中使用了项目变量。
解决这一问题的方法可以是:
更新了代码段:
$('#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">×</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>
从你的代码:
@foreach(模型中的var项目)
ID必须是唯一的。所以,我建议你只在每个表格中插入按钮并移动到模态之外,即:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
..........
</div>
因此,该事件将附加到唯一模态按钮。
摘录:
//
// 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">×</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>
答案 1 :(得分:0)
您正在尝试在DeleteBtnParentID下的第一级找到DeleteBtnID。 尝试使用find,它将搜索DeleteBtnParentID
下的所有级别 $('#DeleteBtnParentID').find("#DeleteBtnID").on('click', function (event) {
alert('Test');
});