Javascript jQuery：基于具有或条件的多个事件执行任务

我正在实现搜索功能，在文本字段的文本框更改事件发生时发送ajax请求。这很好，但现在我必须将搜索框面板添加到搜索条件中，我将获得更改时的复选框值，如下所示：

$('.child_filter input:checkbox').change(function() {
            var type=  $(this).attr("data-type");
            var val=$(this).val();
            if($(this).is(":checked")) {
                if(type=='subject'){
                    subjects.push($(this).val());
                }
                else if(type=='topic'){
                    topics.push($(this).val());
                }
                else if(type=='user'){
                    users.push($(this).val());
                }

            }
            var new_subjects = subjects.join().replace(/,/g, "|");
            var new_topics = topics.join().replace(/,/g, "|");
            var new_users = users.join().replace(/,/g, "|");

            localStorage.setItem("global_search_users",new_users);
            localStorage.setItem("global_search_topics",new_topics);
            localStorage.setItem("global_search_subjects",new_subjects);

        });

})

更新：

现在所发生的是，复选框值取自

localStorage

，并发送到控制器，搜索只在textfield change事件上执行

带有ajax请求的文本字段更改事件的代码：

$(document).on('keyup', '#searchbox', function(){
           var s_string =$(this).val();
                    console.log('tabs_content');
                    var users = localStorage.getItem('global_search_users');
                    var topics = localStorage.getItem('global_search_topics');
                    var subjects = localStorage.getItem('global_search_subjects');
                    var tabs_content = custom_base_url+'admin/books/create';
                    $.ajax({
                        type: "POST",
                        data:  {'search_string_in':s_string,'users':users,'topics':topics,'subjects':subjects},  
                        }
                    });
                });

根据选中的任何复选框，在将其发送到搜索查询之前，我对选中的复选框执行一些操作，这与我对文本字段所做的操作相同

有人能指导我如何在一个函数中管理这两个事件并进行检测，以及在哪个元素上发生了此更改

---

目前，搜索是在两个单独的函数中执行的，我检查文本字段和复选框的更改事件，我想要的是有一个函数检测哪个元素被更改（复选框或文本字段）在if-else块中，执行相关操作，结果嵌入到Dom中，下面是我如何实现上述代码的：

$.fn.values = function () {
    return this.map(function () { return this.value; }).toArray();
}

function updateSearch() {
    $.post(custom_base_url + 'admin/books/create', {
        search_string_in: $('#searchbox').val(),
        users: $('.child_filter :checkbox[data-type=users]:checked').values().join('|'),
        topics: $('.child_filter :checkbox[data-type=topic]:checked').values().join('|'),
        subjects: $('.child_filter :checkbox[data-type=subject]:checked').values().join('|')
    }).done(function (data) {
        // now do something with the response data
    });
}

$(document).on('keyup', '#searchbox', updateSearch);
$(document).on('click', '.child_filter :checkbox', updateSearch);

在

localStorage

中存储任何内容似乎都是不必要的，所以我删除了该部分。在执行Ajax请求时使用活动值是可以的。虽然

• 您可能不想在搜索框中的keyup上发布到

  'admin/books/create'

  ，而是想在不同的端点上使用GET
• 您可能希望使用CSS类而不是

  数据类型=“…”

  ，这将使元素更易于选择

一般来说，对于搜索字段，我不建议在每个keyup事件上发送Ajax请求，这会在服务器上创建不必要的请求垃圾邮件，并且会弄乱您的用户界面，因为会有一个用户按下的任何键的更新，即使他们键入得很快。事件处理程序，因此它仅在用户停止键入后X毫秒执行：

$(document).on('keyup', '#searchbox', debounce(updateSearch, 250));

---

将公共逻辑放在两个事件处理程序范围内的函数中，然后从这些事件处理程序中调用它。让该函数从

localStorage

读取值，然后发出AJAX请求以检索实体并更新DOM。另外，我强烈建议使用单个对象作为搜索条件，而不是使用多个单独的数组。如果您需要如何执行上述操作的工作示例，请编辑问题，将文本字段的其他事件处理程序包括在内。我已更新了代码，请检查，感谢您的回答，事件位于文本字段，我们应该如何根据我在问题中提到的复选框更改请求搜索结果？我想在文本字段或chcekbox@Sikander啊，您可以将相同的事件处理程序连接到不同的事件。请参阅更新的答案。感谢您的快速回复，让我再试一次。我可以从“完成”函数向更改事件变量返回值，而不是附加值吗？@Sikander否，您不能从异步函数返回值。但是，您可以在

.done（）

函数中执行需要执行的任何工作，也可以编写另一个执行该工作的顶级函数，并从

.done（）

函数中调用它。