javascript - 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 都完美地显示在我的 View 上。当我让代码继续运行时，所有内容都会从页面中清除。

如果有帮助的话，这是我的表单代码:

<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;
            }
        });
    });
...

<小时/>

为什么会发生这种情况

除了 jQuery 的文档 event.preventDefault和 event.stopPropagation ，检查这些:

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

您将看到正在发生两件事，默认操作和事件冒泡。

默认操作 - 表单提交事件的默认操作是使用表单数据执行 http post。您将在客户端上的事件回发之前捕获该事件，并启动 AJAX 调用来执行该工作。但是，虽然 AJAX 调用已停止执行其操作，但单线程 javascript 引擎仍在提交事件处理程序的上下文中。此时您有机会阻止默认操作。如果不这样做，它将被“排队”以在提交事件处理程序完成时发生。但是，在 ajax 请求开始之后、提交事件处理程序完成之前，ajax 请求就会完成。因此，它的 promise 处理程序被“排队”以尽快执行。当提交事件处理程序完成时，将针对 ajax 请求触发 success。因此，您可以点击其 success 处理程序中的 debugger 行。但紧接着，提交事件的默认行为就会发生，这会导致页面完全刷新。这就是您所看到的 - 您的 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;。

<小时/>

return false; 明白了来自上面链接的 SO 答案

Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.

<小时/>

非 jQuery

我在上面说“跨浏览器支持”是因为遗留问题，例如 this ，并避免 this 造成的困惑。也就是说，event.preventDefault 和 event.stopPropagation 可能可以在普通的 js 事件处理程序中使用。

<小时/>

最后一件事，jQuery 的 event.stopImmediatePropagation如果您希望特定处理程序阻止将事件传播到同一 DOM 元素的其他处理程序，这是一个有用的变体。