Javascript 获取动态元素的.value

我对jQuery和javascript还不太熟悉，所以请对我放松点。我有一个id为“选择猫”的选择框。此选择框是动态创建的，因此我继续使用.on事件处理程序，如下所示：

$(document.body).on('change', '#select-cat', function() {

});

当我试图获得期权价值时，我的问题就出现了。以下是我尝试过的几件事：

var x = this.value; //doesnt work, I'm assuming in this case "this" refers to document.body

---

是否有人可以使用一种方法使此事件处理程序保持在动态元素上，同时仍然能够提取它们的值？

签出。使用时：

使用以下命令：

$('body').on('change', '#select-cat', function() {
   var value = $(this).find('option:selected').val();

   // do something with the value..
});

---

选择框本身没有val，“selected”选项有一个值，它工作得很好：您应该使用

$（this）.val（）

@zzzzBov为什么要使用它们？@Ian，因为

$（this）.val（）

将规范跨浏览器访问值，而

元素有许多小问题，因此使用

$（this.val（）

而不是

this.value

，是值得的，但是我把它作为一个注释，因为我不打算写一个完整的答案。@crayon。标记此问题并解释为什么要将其删除。这对任何人都没有帮助。@Ian OP绑定到body这会影响

文档
的唯一原因是脚本在
中执行，而
文档中
body
还不存在
$（document.body）
将是一个稍微好一点的委托父级，因为在启动回调之前将少进行一次遍历。@Zenith I建议他对其工作进行准确的阅读，因为使用$（document）.on（事件、选择器、处理程序）是最好的方法，依我看，避免动态生成的元素出现任何类型的问题。如果将所有事件侦听器都附加到文档中，由于它必须处理的事件数量过多，因此最终速度会很慢。最好附加到DOM中的已知父元素，以获得更好的性能，并将事件逻辑分组到与之交互的元素。
$(document).on('change', '#select-cat', function() {
    var x = this.value;
});

$('body').on('change', '#select-cat', function() {
   var value = $(this).find('option:selected').val();

   // do something with the value..
});