javascript - 确认删除模态/对话框在部分 View 中使用时不起作用

Question

情况 1:当单击 Delete 1 按钮时，会弹出 Bootstrap 的模式对话框，并且当您单击该按钮的 Delete 时弹出窗口，下面的 jquery 代码，正如预期的那样，正确在 Chrome 浏览器的控制台窗口中写入 Test: id1。

情况2:但是当您使用分部 View 来渲染相同的html时，jquery代码，如下面的情况2所示，不会向 Chrome 浏览器的控制台窗口写入任何内容。我认为这可能与Case 2主视图中的id = DeleteBtnParentID有关。

注意:两种情况下 jqueries 之间的区别在于，在情况 2 中我使用 Event Delegation而在情况 1 中我则不必这样做。

1. 案例 1:以下作品。

查看(全部单独查看，没有部分 View )

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id1">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id2">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="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>Are you sure?</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>
@section Scripts{
    <script>
        $(document).ready(function () {

            $('#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);
            })
        });
    </script>
}

情况 2:当上述 html 通过部分 View 呈现时，以下 dos 不起作用:

主视图:

<div id="DeleteBtnParentID">
    @Html.Partial("TestPartial")
</div>

部分 View [TestPartial.cshtml]:

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id1">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id2">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="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>Are you sure?</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>
@section Scripts{
    <script>
        $(document).ready(function () {

            $('#DeleteBtnParentID').on('click', '#DeleteBtnID', 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);
            })
        });
    </script>
}

Answer 1

问题是您在 PartialView 中使用 @section ，这在设计上永远不会起作用。

解决方法: 更改自

@section Scripts{
<script>
    $(document).ready(function () {

        $('#DeleteBtnParentID').on('click', '#DeleteBtnID', 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);
        })
    });
</script>
}

至

<script>
    $(document).ready(function () {

        $('#DeleteBtnParentID').on('click', '#DeleteBtnID', 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);
        })
    });
</script>

欲了解更多信息，您可以查看此问题: Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine