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

我有一个搜索条件的主视图。 主视图包含带有html表的局部视图。 搜索结果通过ajax加载。

现在我正在尝试通过bootstrap modal实现edit ， create和delete 。 所以在表行按钮单击事件的partial view ，我添加了一个函数来打开这样的模态

     function ShowModal() { $('#myModal').modal('show'); //return false; }  

如果放在partial view中，此function不起作用。 但是，一旦我在main view放置相同的function，模态就会正确打开。

为什么会这样？

我想在我的partial view使用script的原因是因为我想将客户端代码保持在一起，因此更容易理解和维护。

编辑

以下是我的main view以及相关scripts ：

 @model MVC_Replica.Models.LocationSearchViewModel @using (Html.BeginForm("index", "Locations", FormMethod.Get)){ 
 
 
 
 
Location List
 
 
 
 
 
 
 
 
 
 @Html.TextBoxFor(m => m.LocationSearch.LocationName, new { @class = "form-control", @placeholder = "Location Name", @name = "locationName" }) 
 
 
 
 
  
 
 
 
 @Html.Partial("_LocationGrid") 
 
 } 

一个scripts

  $(function () { $('[data-toggle=tooltip]').tooltip(); $('#cmdSearch').click(function () { var locationName = $('#LocationSearch_LocationName').val(); $('#locationGrid').block({ message: '' }); 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); } }); } }); });   

部分视图HTML

 @model MVC_Replica.Models.LocationSearchViewModel @{ IEnumerable location = Model.LocationList; Layout = null; } 
  @foreach (var item in location) {  } 
 
 
    Create  
 
 Location Name 
 
 Date Created 
 
 Location State 
 
 
          
 
 @Html.DisplayFor(modelItem => item.LocationName) 
 
 @Html.DisplayFor(modelItem => item.DateCreated) 
 
 @Html.DisplayFor(modelItem => item.LocationState) 
 
 
  
 
  
 
 × 
Modal Header
 
 
 
 
 Close 
 
 
  

Answer 1

你的这一行在部分页面….

所以当你做一个$('#locationGrid').html(response); 在你的ajax调用中，页面被添加到DOM中并在部分页面脚本中触发文档就绪事件，所以当HTML被添加到DOM时，它开始从顶部解析，而HTML被解析为上面的行被击中，它试图找到一个名为ShowModal的函数，但它尚未加载到DOM中。 因此，您可以将脚本放在部分页面的开头，以便在到达此行之前解析脚本标记，并且可以使用该function。 或者，您可以从按钮标签中删除onclick ，并在文档就绪function中注册按钮单击事件 。 这样您就不必担心放置脚本的位置。

如果这解决了您的问题，请告诉我。

Answer 2

由于您使用的是局部视图，我假设您以迭代方式使用它们。 这意味着您将多次创建相同的java脚本函数。

这就是为什么它不起作用的原因。

您应该避免在部分视图中使用脚本。