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>

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

1 个答案: