在选择项目上使用选定属性时未触发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();
});

或者甚至与代表......这些都没有。似乎没有完成任何更改，选项值3保留在所选属性中。

我不想修改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;
});

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