jquery - 为什么 .change() 不适用于 datalist 元素？还有其他选择吗？

Question

我已经对这个主题进行了一些谷歌搜索，但是由于浏览器对 datalist 元素的支持仍然很差，似乎没有人使用它或者之前没有真正问过这个问题。我有一个数据列表:

<form>

     <input placeholder="Enter a location or choose from the list" list="restaurants" id="hp-restaurants">

     <datalist id="restaurants">
         <option value="Sanford, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/sanford/" />
         <option value="Kitery, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/kittery/" />
         <option value="Belfast, ME" data-attr="<?php echo site_url(); ?>/locations/lobster-in-the-rough/belfast/" />
         <option value="Waterville, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/waterville/" />
         <option value="Brewer, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/brewer/" />
         <option value="South Portland, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/south-portland/" />
         <option value="Bedford, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/bedford-nh/" />
         <option value="Dover, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/dover-nh/" />
         <option value="Chichester, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/chichester-nh/" />
         <option value="Salem, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/salem-nh/" />
         <option value="West Lebanon, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/west-lebanon-nh/" />
         <option value="Nashua, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/nashua-nh/" />
     </datalist>

</form>

每个选项都应该链接到我在其中添加的 data-attr 属性中的页面。如果有更简单的方法让这些选项链接到页面，我只是不知道。这是我第一次尝试对 datalist 元素执行任何操作。因此，如果我从根本上做错了，请随意带我去学校。

目前，我正在尝试在下拉列表更改时触发事件。我认为 jQuery 的 .change() 事件可以处理这个问题，但事实并非如此。不管怎样，我正在测试该事件，看看它是否会以此触发:

$('#hp-restaurants').click(function() {
    console.log('HELLO WORLD');
});

没有骰子。

关于在选项列表更改时让此元素链接到这些页面有什么建议吗？

Answer 1

如果您希望在选择数据列表选项时触发事件，而不是等到 change 事件(该事件在选择新选项时触发)并且 焦点被赋予另一个元素)您应该绑定(bind)到 input 事件，如下所示:

 $('#hp-restaurants').on('input', function () {
    console.log('Input has been changed.');
 });

jsFiddle demo |另请参阅 MDN 文档 'oninput'