ASP MVC jquery函数不在部分视图中工作，但在主视图中工作

我有一个带有搜索条件的主视图。主视图包含一个带有

html

表的局部视图。搜索结果通过

ajax

加载

现在我正试图通过

引导模式
实现
编辑
、
创建
和
删除
。因此，在
部分视图
的表行按钮click event中，我添加了一个函数来打开模式，如下所示

<button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button" onclick="ShowModal();">
    <i class="fa fa-fw fa-info"></i>
</button>

<script type="text/javascript">
    function ShowModal() {
        $('#myModal').modal('show');
        //return false;
    }
</script>

脚本

<script type="text/javascript">
    $(function () {
        $('[data-toggle=tooltip]').tooltip();
        $('#cmdSearch').click(function () {
            var locationName = $('#LocationSearch_LocationName').val();

            $('#locationGrid').block({ message: '<img src="../media/ajax-loading.gif"/>' });

            setTimeout(SearchLocations, 2000);

            function SearchLocations() {
                $.ajax({
                    url: "/Locations/SearchLocations",
                    type: "POST",
                    data: { 'locationName': locationName },
                    dataType: "html",
                    success: function (response) {
                        $('#locationGrid').empty();
                        $('#locationGrid').html(response);

                        $('[data-toggle=tooltip]').tooltip();
                    },
                    error: function (xmlHttpRequest, errorText, thrownError) {
                        alert(xmlHttpRequest + '|' + errorText + '|' + thrownError);
                    }
                });
            }
        });
    });
</script>    <!--Search Locations AJAX-->


$（函数（）{
$（“[data toggle=tooltip]”）。tooltip（）；
$（'#cmdSearch'）。单击（函数（）{
var locationName=$（'#LocationSearch_locationName'）.val（）；
$（'#locationGrid'）.block（{消息：'}）；
setTimeout（SearchLocations，2000）；
函数SearchLocations（）{
$.ajax({
url:“/Locations/SearchLocations”，
类型：“POST”，
数据：{'locationName'：locationName}，
数据类型：“html”，
成功：功能（响应）{
$（“#locationGrid”）.empty（）；
$（'#locationGrid'）.html（响应）；
$（“[data toggle=tooltip]”）。tooltip（）；
},
错误：函数（xmlHttpRequest、errorText、thrownError）{
警报（xmlHttpRequest+'|'+errorText+'|'+thrownError）；
}
});
}
});
});

部分查看HTML

@model MVC_Replica.Models.LocationSearchViewModel
@{
    IEnumerable<MVC_Replica.Models.Location> location = Model.LocationList;
    Layout = null;
}
<div class="table-responsive">
    <table class="table table-responsive table-condensed table-bordered table-striped">
        <tr>
            <th>
                <button class="btn btn-outline btn-success" data-toggle="tooltip" title="Create New Location" data-placement="bottom"
                        onclick="location.href='@Url.Action("Create", "Locations")';return false;">
                    <i class="fa fa-fw fa-plus"></i>&nbsp; Create
                </button>
            </th>
            <th>
                Location Name
            </th>
            <th>
                Date Created
            </th>
            <th>
                Location State
            </th>

        </tr>

        @foreach (var item in location)
        {
            <tr>
                <td>
                    <button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Edit Location"
                            onclick="location.href='@Url.Action("Edit", "Locations", new  { id=item.LocationId})';return false;">
                        <i class="fa fa-fw fa-pencil"></i>
                    </button>
                    <button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button"
                            onclick="ShowModal();">
                        <i class="fa fa-fw fa-info"></i>
                    </button>
                    <button class="btn btn-outline btn-danger" data-toggle="tooltip" title="Delete Location"
                            onclick="location.href='@Url.Action("Delete", "Locations", new  { id=item.LocationId})';return false;">
                        <i class="fa fa-fw fa-remove"></i>
                    </button>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LocationName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DateCreated)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LocationState)
                </td>
            </tr>
        }

    </table>

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

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

@model MVC\u Replica.Models.LocationSearchViewModel
@{
IEnumerable location=Model.LocationList；
布局=空；
}
创造
地点名称
创建日期
位置状态
@foreach（位置中的var项目）
{
@DisplayFor（modelItem=>item.LocationName）
@DisplayFor（modelItem=>item.DateCreated）
@DisplayFor（modelItem=>item.LocationState）
}
&时代；
模态头
接近
由于您使用的是局部视图，我假设您以迭代的方式使用它们。这意味着您要多次创建相同的java脚本函数

这就是它不起作用的原因

您应该避免在部分视图中使用脚本。
您在部分页面中的这一行

 <button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button"
                        onclick="ShowModal();">



因此，当您执行
$（'#locationGrid'）.html（响应）时
在ajax调用中，页面被添加到DOM中，并在部分页面脚本中触发一个文档就绪事件（如果有），因此当HTML被添加到DOM中时，它会从顶部开始解析，当解析HTML时，会点击上面的行，并尝试查找名为ShowModal的函数，但它尚未加载到DOM中。因此，您可以将脚本放在部分页面的开头，以便在到达此行之前解析脚本标记，并且函数可用或您可以从按钮标签中删除onclick，并在文档准备功能中注册按钮单击事件。这样，您就不必担心脚本的放置位置

让我知道这是否解决了您的问题
 您的浏览器错误日志中是否有任何异常？脚本不应包含在部分中。除了它们是内联的，如果视图中有多个部分（看起来有），可能会导致问题。我一直在处理这种情况，最终理解了为什么会发生这种情况，我可以帮助您更好地理解它。但是在此之前，我想知道你是如何加载你的部分视图的。我已经检查了控制台，确实我得到了一个错误：ReferenceError:showmodel没有定义。我将编辑我的问题以显示完整场景有些人这么说是因为他们在将脚本放置在部分视图中时发现问题：），但我反对，如果我们有一个1页的应用程序，其中所有页面都通过AJAX加载，该怎么办。所有这些都必须是局部视图，并且我们可以一次加载整个应用程序模块脚本。
 <button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button"
                        onclick="ShowModal();">