在提交表单后替换内容是行不通的

Replacing content after a form is submitted isn't working

本文关键字：行不通 替换 提交 表单      更新时间：2023-09-26

我试图在提交搜索表单后用动态创建的页面的内容替换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>

它破坏了脚本。我也不知道为什么会这样

下面是我需要使用

的工作代码
var success = $($.parseHTML(response)).find(".content");

并指定url

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>
相关文章：