Question

我有一个搜索表单，其中包含下拉列表和<input type="text">元素。我想根据是从下拉列表中选择还是在字段中键入内容来执行AJAX请求。

我用这个脚本来完成这个 -

$('#searchform').on('keyup change', function() {
      //DO THE AJAX SEARCH
}

一切正常，除非在使用表单后点击页面上的任意位置触发事件，因为我认为它被视为“更改”。

因此，例如，我将一些搜索结果附加到HTML div，然后当用户单击结果时，会触发“表单”更改事件，并尝试再次执行该功能。它不会改变结果，但仍会产生不良影响。

有没有办法可以通过下拉选择或输入输入字段来触发AJAX请求，但如果更改不在#searchform元素上，它会忽略请求吗？

Answer 1

$('#searchform').on('keyup change', function(e) {
      if ($(e.target).hasClass('mySpecialInputClass') {
          // execute your code
      }
}

e.target是发起事件的元素。您可能会发现事件对象的其他属性很有用。

Answer 2

另外一个选择。您可以将ajax请求绑定到表单提交，然后使用其他事件触发提交。对于你的情况可能有些过分，但如果你需要不同的表单元素来表现不同，可以增加一些灵活性

$('#searchform').on('submit', function(e) {
    e.preventDefault();
    // Ajax here
});

$('#searchform input').on('keyup', function() {
    $('#searchform').trigger('submit');
});

$('#searchform select').on('change', function() {
    $('#searchform').trigger('submit');
});

Answer 3

这会将 keyup 和更改事件绑定到放在.on选项中的类选择器（在这种情况下，只有class1和class2的元素会受到影响）。

$('#searchform').on('keyup change', '.class1 .class2', function() {
      // execute your code
}

通过单击页面上的其他位置触发JQuery键盘和更改事件

3 个答案: