在jquery更新之后，Div内容会清除

Question

我目前正在jquery中生成一些HTML。数据来自JSON文件。

以下是我创建HTML的代码：

$(document).ready(function () {
        $('#searchForm').submit(function () {
            var entry= $("#searchForm").val();

            $.ajax({
                type: 'POST',
                url: '@Url.Action("myMethod", "myController")',
                data: { 'entry': entry},
                success: function (result) {
                    var jsonData = jQuery.parseJSON(result);
                    buildHTML(jsonData);
                    debugger;     

                },
                error: function (result) {
                    debugger;
                }
            });
        });
    });

    function buildHTML(jsonData)
    {

        var content = ' ';

        $.each(jsonQC, function (i, item) {
           content += //html generation here
        });

        $('#myDiv').html(content);
    }

当我打开控制台时，调试器会停止执行我的jquery。在调试器行被命中时，我的所有html都完美地显示在我的视图上。当我让代码继续时，所有内容都会从页面中清除。

如果它有帮助，这是我的表单代码：

<form id="qcForm" action="">
    <div class="row">
    <div class="col-sm-4">
        <div class="input-group">
            <input id="searchForm" type="text" name="serverName" class="form-control" placeholder="Enter server name">
            <span class="input-group-btn">
                <button id="searchBtn" class="btn btn-default">Search</button>
            </span>
        </div>
    </div>
</div>

Answer 1

在提交事件处理程序中尝试event.preventDefault()。

...
    $('#searchForm').submit(function (evt) {
        var entry;

        evt.preventDefault(); 
        entry = $("#searchForm").val();           

        $.ajax({
            type: 'POST',
            url: '@Url.Action("myMethod", "myController")',
            data: { 'entry': entry},
            success: function (result) {
                var jsonData = jQuery.parseJSON(result);
                buildHTML(jsonData);
                debugger;     

            },
            error: function (result) {
                debugger;
            }
        });
    });
...

---

为什么会这样？

除了event.preventDefault和event.stopPropagation上的jQuery文档之外，请查看以下内容：

1. Bubbling and capturing (javascript)
2. event.preventDefault() vs. return false

您会看到有两件事情发生，默认操作和事件冒泡。

默认操作 - 表单提交事件的默认操作是使用表单数据执行http帖子。您正在回发之前在客户端上捕获事件，并启动AJAX调用来执行工作。但是当AJAX调用没有做到这一点时，单线程javascript引擎仍然在提交事件处理程序的上下文中。此时，您有机会阻止默认操作。如果你不这样做，它就会排队等待＃34;在提交事件处理程序完成时发生。但是，在ajax请求启动之后，但在提交事件处理程序完成之前，ajax请求完成。因此，它的承诺处理程序排队＆＃34;排队＆＃34;尽快执行。当提交事件处理程序完成ajax请求的success触发时。因此，您可以点击其debugger处理程序中的success行。但在此之后，会立即发生提交事件的默认行为，从而导致页面完全刷新。这就是你所看到的 - 你的DOM在默认行为（完全回发）完成后立即重置。 jQuery提供event.preventDefault()来提供跨浏览器支持以停止默认行为。

事件冒泡 - 如果您有嵌套的DOM元素，并且链中的每个元素处理相同的事件，则事件将从最内层元素同步到最外层元素（如果事件传播）没有停止。

考虑这个片段......

<div onclick="outerDivClick()">
    <div onclick="innerDivClick()">
        <input onclick="inputClick()" />
    </div>
</div>

点击input时，默认行为为inputClick()即可触发，然后该事件会冒泡到内部div，innerDivClick()会触发，如果其中一个事件处理程序没有调用body或event.stopPropagation()，则可以一直到return false;。

---

来自上面链接的SO答案的

return false; GOTCHA

  

请注意，此行为与普通（非jQuery）事件处理程序不同，其中，值得注意的是，return false不会阻止事件冒泡。

---

非jQuery的

我说＆＃34;跨浏览器支持＆＃34;由于this等遗留问题导致上述问题，并避免了this导致的混淆。话虽如此，event.preventDefault和event.stopPropagation 可能可以在普通的js事件处理程序中使用。

---

最后一点，jQuery的event.stopImmediatePropagation是一个有用的变体，如果你想要一个特定的处理程序来阻止事件的传播 同一个DOM的其他处理程序元件

Answer 2

您使用var content超出范围，并且您为每个循环的每次迭代重新声明它。只需在$ .each循环之前声明var content = '';：

function buildHTML(jsonData)
{
    var content = '';
    $.each(jsonQC, function (i, item) {
       content += //html generation here
    });

    $('#myDiv').html(content);
}

Answer 3

在将html连接到它之前，你可能必须声明一个空的var内容。

function buildHTML(jsonData){

  var content = " "

  $.each(jsonQC, function (i, item) {
     content += //html generation here
  });

  $('#myDiv').html(content);
 }