Jquery:获取动态创建元素的属性值

Jquery: Get attribute value of dynamically created element

本文关键字：属性 元素 创建 获取 动态 Jquery      更新时间：2023-09-26

我动态创建了一个div，在单击事件时，我想获取它的属性值，但是当我尝试这样做时，它会给我一个错误。" jQuery(...).attr(...).val is not a function "，请参考下面的代码

    jQuery("#target1").on("click", function(){
        jQuery("#target_block").append('`<div id="target2" data-rel-pid="12345">Click Me</div>`');
    });
    jQuery("#target2").on("click", function(){
        var bid=jQuery(this).attr("data-rel-pid").val();
    });

实际上错误出在这一行：

var bid=jQuery(this).attr("data-rel-pid").val();

没有必要在 .attr（） 上 cal .val（）

var bid=jQuery(this).attr("data-rel-pid");

.attr（） 本身将返回该值。

有关此内容的更多信息，请参阅此处。

删除 .val（）

jQuery("#target2").on("click", function(){
var bid=jQuery(this).attr("data-rel-pid");
});

由于您已经在使用 jQuery 并且想要获取数据属性，因此您也可以执行类似操作。

$("#target2").on("click", function(){
 var bid=$(this).data("rel-pid");
});

由于target2在网页生命周期的后期追加，因此需要使用event delegation将事件附加到动态追加的元素。

删除.val()，使用 .attr() 获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

试试这个：

jQuery("#target1").on("click", function() {
  jQuery("#target_block").append('<div id="target2" data-rel-pid="12345">Click Me</div>');
});
jQuery("#target_block").on("click", '#target2', function() {
  var bid = jQuery(this).attr("data-rel-pid");
  alert(bid);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="target1">target1</div>
<div id="target_block">target_block</div>

您可以使用此代码 - 

jQuery("#target2").on("click", function(){
    var bid = jQuery(this).data("rel-pid");
});
相关文章：