jQuery 在 Ajax 发布后无法正常工作答案

【问题标题】：jQuery not working after Ajax postjQuery 在 Ajax 发布后无法正常工作
【发布时间】：2019-02-09 02:28:59
【问题描述】：

我目前正在使用 Grid.Mvc 表的 MVC 页面。我还有一些搜索字段，我可以通过 Ajax Post 更新表格，一旦我使用搜索字段并提交排序，html 就会在回发时被替换，一旦被替换，网格行就不能像在 Ajax 调用之前那样被点击，就像 ajax 调用正在杀死 javascript 或 Jquery 或两者，

这里是网格的 Ajax 调用代码：

$(function() {
  $(document) on.("click", "#buscar", function() {
    $.ajax({
      url: '/MainPage/Grid',
      type: 'POST',
      async: false,
      datatType: 'html',
      processData: true,
      data: {
        url: $('#url').val(),
        isInternal: ('#isInternal').val()
      },
      success: function(data) {
        $('#grid').html(data);
      }
    })
  });
});

这是当我单击行时发送另一个 Ajax 调用的代码，但在第一个代码发布后，网格变得不可点击；

$(function() {
  pagesGrids.linksgrid.onRowSelect(function() {
    $.ajax({
      url: '/mainpage/getlinkdetails',
      type: 'POST',
      async: false,
      dataType: 'html',
      processData: true,
      data: {
        id: e.row.BrokenId
      },
      success: function(data) {
        $('#linkdetails').html(data);
      },
      error: function() {
        alert('something went wrong')
      }
    })
  });
})

任何可以为我指明正确方向的帮助或提示将不胜感激，谢谢

更新

它自己的网格是 MVC 上 Index 的局部视图渲染

<div id="grid">
  @Html.Action"Grid"
</div>

【问题讨论】：

您在 Chrome 开发工具的控制台上看到任何错误吗？
不清楚，因为您没有发布任何html，但第二个函数可能需要使用事件委托（与第一个函数一样）
更新了@Chandu 的问题，我只使用 IE 进行测试，但没有任何错误，只是在新网格上，我无法再像在 ajax 调用之前那样单击该行
@Stephen 我从 Index 视图中添加了 html，正如您所看到的，它自己位于部分视图上的网格
@gibberish 我用正确的语法更新了问题

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

您的局部视图将新元素呈现到页面中，而不是更改现有元素。

您需要在部分回发后将 javascript 事件（点击）重新绑定到新元素。

【讨论】：

【解决方案2】：

虽然这是一篇旧帖子，但我找到了一个适合我的解决方案，并希望它适用于其他人。

AJAX 表单有一个名为 data-ajax-complete 的数据破折号属性，您可以将要运行的 javascript 函数的名称传递给该属性。该 javascript 函数可以包含将点击事件重新绑定到所有元素所需的代码。

<form asp-controller="Home" asp-action="SaveForm" data-ajax-complete="onComplete" data-ajax="true" data-ajax-method="POST">
    <input type="submit" value="Save" class="btn btn-primary" />
    <div id="Results"></div>
</form>

<script>
    var onComplete = function(){
        results.html("");
    };
</script>

更多详情here.

【讨论】：