jquery ajax搜索表单div显示的问题

Question

我正在构建一个具有下拉菜单的搜索表单。当您在下拉菜单中选择一个项目时，它会使用 ajax 调用另一个 php 文件，并返回标签以调整下拉列表和搜索文本框字段的大小。另一个 jquery ajax 使用输入事件进行调用，以在另一个 DIV 列表中显示搜索结果项，该列表显示在搜索 txt 框下方。当您使用其中任何一个时，这一切都很好，但它们都只在第一次工作。如果您在下拉列表中选择一个项目，它会调整大小，但搜索 txt 下拉列表和下拉列表调整大小将不再起作用，除非您刷新浏览器。如果您输入 search txt，它会执行良好并在 txt 框下显示下拉 div 标签。使用按键的搜索 txt 输入每次都有效，但是当我调用调整下拉列表的大小时，一切都会停止工作。我尝试了许多不同的方法，但没有任何方法可以解决此问题。我是 jquery 的新手，因此不胜感激。一个代码块调用调整下拉列表的大小，如果在下拉列表中选择了不同的项目，一个代码块调用更改搜索 txt div 标签结果，另一块代码刷新每个按键的 div 标签结果搜索文本框。我尝试了 document.ready 和许多其他方法，但似乎没有任何效果。

Here is a link to the test search form

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

Answer 1

问题很可能是因为您将 html 内容替换为来自 ajax 调用的响应。例如，查看下拉列表，您在“#TESTsearchtxtboxdepartmentslist”上设置了一个“输入”事件。一旦触发该事件，您的代码将替换“#TESTidsearchproductsform”中的所有 html，其中包括下拉列表本身。如此有效，您现在在页面上有一个 new 下拉菜单，没有附加任何事件。

您想使用 jQuery 查看事件委托：https://learn.jquery.com/events/event-delegation/

你可以这样做：

$("#TESTidsearchproductsform").on('input', '#TESTsearchtxtboxdepartmentslist', function(){
...
});

这样，事件仍然附加到“#TESTidsearchproductsform”，并将应用于可能在页面上创建的任何新的“#TESTsearchtxtboxdepartmentslist”。

---

更新以下评论

还有很多其他的编码方式，所以我根据你已经拥有的代码和我能理解的内容来回答：

1. 保留以$("#TESTidsearchproductsform").on('input', '#TESTsearchtxtboxdepartmentslist', function () { 开头的代码即可，没关系
2. 更改以$('#TESTsearchtxtboxdepartmentslist').on('change', function () { 开头的代码，以便将其委托给表单，即$("#TESTidsearchproductsform").on('change', '#TESTsearchtxtboxdepartmentslist', function () {
3. 更改以$('#TESTsearchtxtbox').on('input', function () { 开头的代码，使其也被委托给表单，即$("#TESTidsearchproductsform").on('input', '#TESTsearchtxtbox', function () {
4. 移动 div#TESTsearchtxtboxlistcontent 使其位于原始 html 中的 form 标记之外，以免被 ajax 结果覆盖