1

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

我已经使用这个脚本来完成这个 -

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

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

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

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

4

3 回答 3

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

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

于 2013-07-25T20:03:24.533 回答
1

只是另一种选择。您可以将 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');
});
于 2013-07-25T20:12:28.960 回答
1

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

$('#searchform').on('keyup change', '.class1 .class2', function() {
      // execute your code
}
于 2013-07-25T20:26:14.550 回答