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

Question

我有一个使用 .NET MVC 从模型动态生成的 HTML 代码。在字段之间有一个 select with selected 选项（基于模型中的数据）。

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

或者即使是委托......这些都不起作用。似乎没有进行任何更改，选项值 3 保留为 selected 属性。

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

你有什么建议吗？

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

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

感谢您的快速回答。

Answer 1

您的 HTML 代码是动态生成的。所以，您必须使用 $(document).on(); jQuery

例如：

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

Answer 2

你可以试试：

$(document).on("change", "#sampleSelect", function () {
    // Stuff
});

Answer 3

您的代码似乎是文件。 演示：http://jsfiddle.net/6cLs6hcx/

我猜你可能想在 ready() 方法中添加一个事件处理程序：

文档：https://api.jquery.com/ready/

$( document ).ready(function() {
// Handler for .ready() called.
});

相当于推荐的方式：

$(function() {
  // Handler for .ready() called.
});

所以你的代码可以是这样的：

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

这里有一个教程： https://www.tutorialspoint.com/jquery/jquery-events.htm

Answer 4

$(document).on('change', '.selectOption', function() {
    console.log($(this).val());
});

Answer 5

我认为您的意思是在页面加载后加载 HTML 内容？如果是这样使用

$(document).on('change', '#sampleSelect', function () {
    var test = $('#sampleSelect').val();
    // OR
    var test = $(this).val();
    // OR
    var test = this.value;
});

即使元素最初不可用，它也会附加事件。