HTML <select> JQuery .change 不起作用答案

【问题标题】：HTML <select> JQuery .change not workingHTML <select> JQuery .change 不起作用
【发布时间】：2012-06-28 07:03:07
【问题描述】：

好吧，我不明白为什么这不起作用。看起来很简单。

这是我的下拉菜单：

<div>
    <form>
        <select id='yearDropdown'>
            <c:forEach var="years" items="${parkYears}">
                <option value=/events.html?display_year=${years}<c:if test="${currentYear == years}">selected="selected"</c:if>>${years}</option>
            </c:forEach>
        </select>
    </form>
</div>

这里是 JavaScript

$("#yearDropdown").change(function () {
    alert('The option with value ' + $(this).val());
});

现在我只想让它工作，这样我就可以添加功能。谢谢！

【问题讨论】：

控件的渲染输出是什么（查看源代码、检查元素等...）？
原谅我，我不知道你在问什么。我是一名CS学生。而且我几乎不了解javascript
与其说“没用”，不如告诉我们到底发生了什么？你没有得到任何警报，好的，明白了。但是你的控制台有没有说什么？您是否正确加载了 jQuery？这个javascript事件的上下文是否在$(function(){ });调用中？
这到底是为什么被否决了？这是一个非常合理且表述清楚的问题。
关于接受的答案，如果您使用的是 jQuery 1.6.x 或更早版本，请确保使用 delegate 而不是 live 和 on() 而不是 live() v1.7，因为live() 的许多缺点。更多细节在这里：stackoverflow.com/a/11148053/448144

标签： javascript jquery select drop-down-menu

【解决方案1】：

该代码在语法上是正确的。很可能是在错误的时间运行它。

当 DOM 准备好时，您需要绑定事件：

原生 JS/DOM

window.addEventListener('DOMContentLoaded', () => {
    const yearDropDown = document.getElementById('yearDropdown');
    yearDropDown.addEventListener('change', () => { 
        alert(yearDropDown.value)
    });
});

jQuery

$(function(){ /* DOM ready */
    $("#yearDropdown").change(function() {
        alert('The option with value ' + $(this).val());
    });
});

或者，使用live：

$("#yearDropdown").live('change', function() {
    alert('The option with value ' + $(this).val());
});

或者，使用delegate：

$(document.body).delegate('#yearDropdown', 'change', function() {
    alert('The option with value ' + $(this).val());
});

或者，如果你使用 jQuery 1.7+:

$("#yearDropdown").on('change', function() {
    alert('The option with value ' + $(this).val());
});

不过，通常最好在浏览器完成渲染标记后执行脚本。

【讨论】：

没关系，因为.change 将应用于每个新添加的元素。（如有不妥请指正）
@Derek：你错了，它适用于匹配表达式 (#yearDropdown) 的元素在该行执行的那一刻。 jQuery 不监视新元素或类似的东西。
@user1469925 不同之处在于，该函数在文档加载完成后调用，并且 DOM 已创建。您的代码在读取后立即执行，并且 DOM 可能尚未准备好 - 选择尚不存在。
感谢您的解释，我想我需要阅读 DOM。就像我说的那样，我是一名 CS 学生，实习有点过头了。不过很有趣！
如果你使用 jQuery pre 1.7，不要使用live，而是使用delegate。此外，live 主要用于当您想要绑定到动态注入元素时。这就是 on() 现在的样子，因为 live 有很多缺点，请参阅此处了解更多详细信息：stackoverflow.com/a/11148053/448144

【解决方案2】：

我已经试过你的代码in jsFiffle。我手动添加了一些年份作为选项。它工作正常。

只需在 $(document).ready 中绑定 .change 事件即可：

$(document).ready(function(){
  $("#yearDropdown").change(function () {
      alert('The option with value ' + $(this).val());
  });
});

【讨论】：

【解决方案3】：

您的代码是正确的并且对我有用，请参见此处：http://jsfiddle.net/mobweb/2Skp9/

你确定 jQuery 已经正确加载了吗？

【讨论】：

【解决方案4】：

不确定这是否有帮助，但你可以试试这个：

    $("#yearDropdown").live("change", function () {
    alert('The option with value ' + $(this).val());
});

【讨论】：

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.
是吗？我猜需要阅读发行说明。感谢您的信息。