AJAX 调用后 JavaScript 停止工作答案

【问题标题】：JavaScript stop working after AJAX callAJAX 调用后 JavaScript 停止工作
【发布时间】：2014-03-27 17:29:50
【问题描述】：

ajax 调用后我的 javascript 被锁定。

当用户按下回车键时，我调用我的 c# 方法来搜索用户输入的城市，然后显示温度，但是当搜索结束时，javascript 停止工作。我发现错误出现在以下几行： var div = document.getElementById('rb-grid'); div.innerHTML = resp.responseText + div.innerHTML;

代码：

$(document).ready(function () {
    $('#search-bar').keyup(function (event) {
        if (event.keyCode == 13) {

            myFunction();

        }
    });

    function myFunction() {
        var city = $('#search-bar').val();
        $.ajax({
            url: '@Url.Action("getWeatherSearch", "Index")',
            data: { city: city },
            async: false,
            complete: function (resp) {
                var div = document.getElementById('rb-grid');
                div.innerHTML = resp.responseText + div.innerHTML;
                Boxgrid.init();
            }
        });
    } });

HTML：

            <div align="center" class="div-search-bar">
                @Html.TextBox("search-bar", "", new { @class = "search-bar", placeholder = "search" })
            </div>

【问题讨论】：

#rb-grid 是什么？可能是父元素，而您正在用新元素替换 #search-bar 元素？
除非您有充分的理由将其包含在内，否则您应该删除 async: false。
@Andy 我使用 async: false，因为我需要方法中的值
什么是Boxgrid.init()？
@adeneo #rb-grid 是我将添加一些方法返回给我的 html 代码的地方。

标签： c# javascript jquery ajax

【解决方案1】：

尝试以下方法，看看它是否适合您：

 $(function () {
     var $searchbar = $('#search-bar'),
         $grid = $('#rb-grid');

     if ($grid.length) {
         $searchbar.on('keyup', function (event) {
             if (event.keyCode == 13) {
                 myFunction();

             }
         });

         function myFunction() {
             var city = $searchbar.val();
             $.ajax({
                 url: $.grid.data('weather-url'),
                 data: { city: city }
             })
             .done(function (resp) {
                     $grid.html(resp.responseText + $grid.html());
                     Boxgrid.init();
                 }
             });
         }
     }
 });

将以下内容作为数据属性添加到您的 html 中的某处，可能在您的网格上：

 <div id='rb-grid' data-weather-url='@Url.Action("getWeatherSearch", "Index")'></div>

【讨论】：

它仍然被锁定