如何使用jquery加载函数检索的html表单

我在另一个名为webpage\u 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>

按标题搜索
按参与者搜索
主任搜查

当我将此代码直接添加到我的页面时，它就工作了，当我点击submit按钮时，搜索就工作了

但是，当我尝试使用jquery.load函数从不同的文件中分别加载此内容时，它只会在页面上显示表单，而当我点击submit按钮时，什么也不会发生

用于将表单内容加载到我的div搜索菜单中的代码：

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

/*全球美元*/
$（文档）.ready（函数（）{
$（'search_menu'）。加载（'webpage_search.html'）；
});

我建议您使用

ajax（）

语法，因为

load（）

实际上已被弃用：

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

同时更改

表单

标记打开和关闭的位置：

<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>

按标题搜索
按参与者搜索
主任搜查