Question

我正在执行jquery ajax搜索，并在datalist选项中打印响应现在我想在点击datalist中的选项时触发事件，这些选项是ajax调用的返回值，当我写一些东西时一个输入字段，它显示选项中的值，但当我点击它时，我想显示一个警告框。我已经尝试了以下代码，但它不起作用，它没有给出任何错误，也没有触发任何事件。

<html>
<input type="text" name="search" class="form-control search" list="res" />
<datalist id="res">
<option class="res-opt">Mark</option>
<option class="res-opt>Stewart</option>
        </datalist>
</html>
<script>
$(document).ready(function(){
$(document).on("click",".res-opt",function(){
 alert("clicked");

 });});
</script>

Answer 1

我认为datalist元素没有任何事件，我能想到的最好的事情就是在文本字段上挂钩input。然而，这会引发所有更改，而不仅仅是因datalist点击选项而导致的更改。

＆＃13;

$(document).ready(function() {
  $(document).on("input", "input[type=text]", function() {
    log("got input '" + this.value + "'");
  });
});
function log(msg) {
  $("<p>").text(msg).appendTo(document.body);
}

＆＃13;

<input type="text" name="search" class="form-control search" list="res">
<datalist id="res">
  <option class="res-opt">Mark</option>
  <option class="res-opt">Stewart</option>
</datalist>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>

＆＃13;

来自你的评论：

我想要的是仅在点击datalist选项
时触发任何事件

我无法想办法。只有当input事件触发且输入值与datalist选项之一匹配时，所做的事情才会触发处理程序：< / p>

＆＃13;

$(document).ready(function() {
  var listOptions = $("#res option").map(function() {
    return this.value;
  }).get();
  $(document).on("input", "input[type=text]", function() {
    if (listOptions.indexOf(this.value) != -1) {
      log("Got option '" + this.value + "'");
    }
  });
});
function log(msg) {
  $("<p>").text(msg).appendTo(document.body);
}

＆＃13;

<input type="text" name="search" class="form-control search" list="res">
<datalist id="res">
  <option class="res-opt">Mark</option>
  <option class="res-opt">Stewart</option>
</datalist>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>

＆＃13;

当然，这不是一回事，但我认为它与您的关系非常接近。

jquery click不会触发datalist的选项

1 个答案: