php - jquery ajax搜索表单div显示的问题
问题描述
我正在构建一个具有下拉菜单的搜索表单。当您在下拉菜单中选择一个项目时,它会使用 ajax 调用另一个 php 文件,并返回标签以调整下拉列表和搜索文本框字段的大小。另一个 jquery ajax 使用输入事件进行调用,以在另一个 DIV 列表中显示搜索结果项,该列表显示在搜索 txt 框下方。当您使用其中任何一个时,这一切都很好,但它们都只在第一次工作。如果您在下拉列表中选择一个项目,它会调整大小,但搜索 txt 下拉列表和下拉列表调整大小将不再起作用,除非您刷新浏览器。如果您输入 search txt,它会执行良好并在 txt 框下显示下拉 div 标签。使用按键的搜索 txt 输入每次都有效,但是当我调用调整下拉列表的大小时,一切都会停止工作。我尝试了许多不同的方法,但没有任何方法可以解决此问题。我是 jquery 的新手,因此不胜感激。一个代码块调用调整下拉列表的大小,如果在下拉列表中选择了不同的项目,一个代码块调用更改搜索 txt div 标签结果,另一块代码刷新每个按键的 div 标签结果搜索 txt 框。我已经尝试过 document.ready 和许多其他的东西,但似乎没有任何效果。
//Code block #1 resizes the drop down list and search txt box when new //item is selected in the drop down list
$('#TESTsearchtxtboxdepartmentslist').on('input', function () {
$.ajax({ //create an ajax request to ajax.php
type: "GET",
url: "../test/TESTajx.php?class=classTESTTopBar&func=funcTESTCreateSearchDeptList&wif=1&depID=" + $("#TESTsearchtxtboxdeplist").val(),
dataType: "html",
success: function (response) {
$("#TESTidsearchproductsform").html(response);
}
});
});
//Code block #2 changes search results in DIV tag when a different item //is selected in the drop down list
$('#TESTsearchtxtboxdepartmentslist').on('change', function () {
$.ajax({ //create an ajax request to ajax.php
type: "GET",
url: "../test/TESTajx.php?class=classTESTTopBar&func=funcTESTSearchTxtInput&SearchTxtString=" + $("#TESTsearchtxtbox").val() + "&sdepID=" + $("#TESTsearchtxtboxdeptlist").val(),
dataType: "html",
success: function (response) {
if (response.trim() == '') {
$("#TESTsearchtxtboxlistcontent").hide();
} else {
$("#TESTsearchtxtboxlistcontent").html(response);
$("#TESTsearchtxtboxlistcontent").show();
}
}
});
});
//Code block #3 displays DIV tag under the search txt box every time a //new key is entered or removed
$('#TESTsearchtxtbox').on('input', function () {
$.ajax({ //create an ajax request to ajax.php
type: "GET",
url: "../test/TESTajx.php?class=classTESTTopBar&func=funcTESTSearchTxtInput&TESTSearchTxtString=" + $(this).val() + "&DEPID=" + $("#TESTsearchtxtboxdeptlist").val(),
dataType: "html",
success: function (response) {
if (response.trim() == '') {
$("#TESTsearchtxtboxlistcontent").hide();
} else {
$("#TESTsearchtxtboxlistcontent").html(response);
$("#TESTsearchtxtboxlistcontent").show();
}
}
});
});
] 1
解决方案
问题很可能是因为您将 html 内容替换为来自 ajax 调用的响应。例如,查看下拉列表,您在“#TESTsearchtxtboxdepartmentslist”上设置了一个“输入”事件。一旦触发该事件,您的代码将替换“#TESTidsearchproductsform”中的所有 html,其中包括下拉列表本身。如此有效,您现在在页面上有一个新的下拉列表,没有附加任何事件。
您想使用 jQuery 查看事件委托:https ://learn.jquery.com/events/event-delegation/
有了它,您可以执行以下操作:
$("#TESTidsearchproductsform").on('input', '#TESTsearchtxtboxdepartmentslist', function(){
...
});
这样,该事件将保持附加到“#TESTidsearchproductsform”,并将应用于可能在页面上创建的任何新的“#TESTsearchtxtboxdepartmentslist”。
更新以下评论
还有很多其他的编码方式,所以我根据你已经拥有的代码和我能理解的内容来回答:
- 让代码保持
$("#TESTidsearchproductsform").on('input', '#TESTsearchtxtboxdepartmentslist', function () {
原样,很好 - 更改代码开始
$('#TESTsearchtxtboxdepartmentslist').on('change', function () {
,以便将其委托给表单,即$("#TESTidsearchproductsform").on('change', '#TESTsearchtxtboxdepartmentslist', function () {
- 更改代码开始
$('#TESTsearchtxtbox').on('input', function () {
,使其也被委托给表单,即$("#TESTidsearchproductsform").on('input', '#TESTsearchtxtbox', function () {
- 移动 div#TESTsearchtxtboxlistcontent 使其位于原始 html 中的 form 标记之外,这样它就不会被 ajax 结果覆盖
推荐阅读
- sql - 在多个不相关表中的多个字段之间应用 COALESCE
- javascript - 如何将 postgres 查询分配给 node.js、Discord bot 和 postgres 集成中的变量?
- python - Python 安装旧版本的 matplotlib 导致 freetype 和 png 错误
- python - 如何使用 pypfopt 绘图绘制有效边界
- python - 切片numpy数组的不同部分
- javascript - Vue App:v-html 指令中的内容发生了奇怪的变化
- python - Pymongo 正在获取数据库连接,但没有执行任何 CRUD 操作并抛出错误的身份验证错误
- sql - 在 Azure SQL 数据库中使用“INSERT INTO”SQL 查询时出错
- r - 需要用 R 中的新列转置特定数量的数据行
- python - 如何管理 tkinter Treeview 中列的大小?