如何使用jquery加載函數檢索到的html表格

Question

我在不同的文件中有這種搜索表單，名爲webpage_search.html。

<ul class="search"> 
    <li> 
     <form action="webpage_srch_rslts.php" method="GET"> 
     <select style="height:30px;" class="col-sm-3" name="selection_id" id="selection_id"> 
     <option value="Movies">Search by title</option> 
     <option value="Actors">Search by actor</option> 
     <option value="Directors">Search by director</option> 
     </select> 
    </li> 
    <li> 
     <input style="width:272px; height:30px;" type="text" name="query" /> 
    </li> 
    <li> 
     <input style="height:30px;" type="submit" value="Search"/> 
    </form> 
    </li> 
</ul> 

當我將這段代碼直接添加到我的頁面時，它起作用，當我點擊提交按鈕時，搜索就起作用。

但是，當我嘗試使用jquery.load函數分別從不同的文件加載此內容時，它只顯示頁面上的表單，但是當我點擊提交按鈕時沒有任何反應。我使用的表單內容加載到我的div search_menu

代碼：

<script> 
     /* global $ */ 
     $(document).ready(function() { 
      $('#search_menu').load('webpage_search.html'); 
     }); 
</script> 

Answer 1

我建議你使用ajax()語法原因load()實際上已經過時：

$(document).ready(function() { 
    $.ajax({ 
      url: "webpage_search.html", 
      success: function(result){ 
       $("#search_menu").html(result); 
      } 
    }) 
}) 

而且改變的地方form標籤打開和關閉：

<ul class="search"> 
<form action="webpage_srch_rslts.php" method="GET"> 
    <li> 
     <select style="height:30px;" class="col-sm-3" name="selection_id" id="selection_id"> 
     <option value="Movies">Search by title</option> 
     <option value="Actors">Search by actor</option> 
     <option value="Directors">Search by director</option> 
     </select> 
    </li> 
    <li> 
     <input style="width:272px; height:30px;" type="text" name="query" /> 
    </li> 
    <li> 
     <input style="height:30px;" type="submit" value="Search"/> 
    </li> 
</form> 
</ul>