提交表單後替換內容不起作用

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

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>