jquery load関数で取得した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フォームの内容をロードするために使用してい

コード：

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

はまた、場所を変更します。

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

Answer 1

は、私はあなたがajax()構文原因load()が実際に推奨されていません使用をお勧めします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>