jquery click не запускается по параметрам datalist

Question

Я выполняю поиск jQuery ajax и печатаю ответ в опции datalist, теперь я хочу вызвать событие при щелчке опции в datalist, эти параметры являются возвращаемыми значениями ajax, когда я что-то пишу в поле ввода, он показывает значения в параметрах, но когда я нажимаю на него, я хочу показать окно предупреждения. Я пробовал следующий код, но его не работает, он не дает никаких ошибок и не вызывает никаких событий.

Answer 1

Я не думаю, что datalist элементы имеют каких-либо событий, лучшее, что я могу думать о том, чтобы подключить input на текстовое поле. Тем не менее, это срабатывает для всех изменений, а не только из-за нажатия на кнопки выбора из datalist.

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

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

Ваш комментарий:

, что я хочу, чтобы вызвать какое-либо событие на клик только по опционам DataList

Я не могу думать любым способом сделать это. То, что мы можем сделать, это вызвать обработчик только если input срабатывает событие и значение сигнала соответствует один из вариантов: datalist

$(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); 
 
}

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

Который не является, Конечно, совершенно то же самое, но я думаю, что это примерно так же близко, как и вы.