JQuery 选择器在动态创建的内容中不起作用？

Question

我正在尝试检索 .html() .val() 或 html 元素中的其他内容，这是我的 html 代码（动态生成）：

<div class="presupuesto"><h2 class="precio" id="precio" value="1202">1.202,00 €</h2>

我需要 .val() 属性！

我想用 JQuery 和 JavaScript 显示，选择了哪个选项，然后显示有关 h2 标记（价格）的信息。这是我的 JS 代码：

$('select').on('change', function (e) {

    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    alert(valueSelected);
    alert(("#precio").val());

});

第一个 alert(valueSelected) 运行良好，但第二个触发了 TypeError

提前致谢！

Answer 1

正如你所说，你有动态生成的元素。然后你需要使用event-delegation:-

$(document).on('change','select',function(){
  alert($(this).val()); // to get select value
  alert($('#precio').attr('value')); // try to use data-attribute which is standered way
});

注意：- 因为<h1>,<h2>..,<div>,<ul><li><p>.... 这些元素没有value 属性（以标准方式）。因此，请为他们使用data-attribute 选项，如下所示：-

<h2 class="precio" id="precio" data-value="1202">1.202,00 €</h2>

然后修改 jQuery 代码，如下所示：-

 alert($('#precio').data('value'));