javascript - 在选择项上使用所选属性时未触发 Jquery 更改事件

Question

我有一段使用 .NET MVC 从模型动态生成的 HTML 代码。在字段之间有一个带有选定选项的选择(基于模型中的数据)。

<select class="myClass" data-val="true" id="sampleSelect" name="sampleSelect">
  <option value="">Select an option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected="selected">3</option>
</select>

我想像这样使用 jQuery 附加更改事件:

$('#sampleSelect').change(function () {
    var test = $('#sampleSelect').val();
});

或者像这样:

$('#sampleSelect').on('change', function () {
    var test = $('#sampleSelect').val();
});

或者甚至使用委托(delegate)...这些都不起作用。似乎没有进行任何更改，选项值 3 保留为所选属性。

我不想修改 HTML，我只是想使用正确的 javascript 代码来捕获事件。

你有什么建议吗？

编辑:选择的属性保持值 3。即使我选择了不同的项目。并且更改事件不会触发。我不知道为什么。这是我的问题。

最终编辑:我的错，选择是以正确的方式完成的。问题是有 2 个具有相同 ID 的选择，而 jQuery 一直在屏幕上的其他地方选择隐藏的一个。

感谢您的快速回答。

Answer 1

您的 HTML 代码是动态生成的。因此，您必须使用 $(document).on();查询

例如:

$(document).on('change','#sampleSelect', function () {
    // your code
});