提交表单后替换内容不起作用

Question

我正在尝试在提交搜索表单后将div的内容替换为动态创建的页面的内容。 在将内容包装到另一个div中之前，它可以正常工作。 不知道这是CSS问题还是JavaScript问题。 因此，如果内容div没有包装在另一个div中，则可以像这样正常工作。

<form id='Myform' method='GET'>
    <input class="input" autocomplete="off" type='search' id='query' name='query' placeholder='Search'>
    <input class="submit" type='submit' value='Search'>
</form>

<div class="content">
    <ul>
        <li></li>
    </ul>
</div>

<script>
$( document ).on( "submit", "#Myform", function() {
    $.ajax({
        data: $(this).serialize(),
        type: $(this).attr('GET'),
        success: function(response) {
            var success =  $($.parseHTML(response)).filter(".content"); 
            $('.content').replaceWith(success);
        }
    });
    return false;
});
</script>

但是，如果我将内容div包装在一个容器中，即使我不向该容器添加任何CSS（只是在其周围放置一个div），脚本也将不再起作用。

<div class="container">
    <div class="content">
        <ul>
            <li></li>
        </ul>
    </div>
</div>

它破坏了脚本。 我不太确定为什么会这样。

Answer 1

所以这是我需要使用的工作代码

var success = $($.parseHTML(response)).find(".content");

并指定网址

url : "myURL"

这是完整的

<form id='Myform' method='GET'>
    <input class="input" autocomplete="off" type='search' id='query' name='query' placeholder='Search'>
    <input class="submit" type='submit' value='Search'>
</form>

<div class="content">
    <ul>
        <li></li>
    </ul>
</div>

<script>
$( document ).on( "submit", "#Myform", function() {
    $.ajax({
        data: $(this).serialize(),
        type: $(this).attr('GET'),
        url : "myURL"
        success: function(response) {
            var success = $($.parseHTML(response)).find(".content");
            $('.content').replaceWith(success);
        }
    });
    return false;
});
</script>