Question

我动态创建了一个div，并且在点击事件中我希望获得它的属性值，但是当我尝试这样做时，它会抛出一个错误。＆＃34; jQuery(...).attr(...).val is not a function＆＃34;，请参阅下面的代码

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

Answer 1

实际上错误就在这一行：

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

无需在.attr（）

上使用cal .val（）

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

.attr（）本身将返回值。

有关详情，请参阅here。

Answer 2

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

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

Answer 3

删除.val（）

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

Answer 4

由于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>

Answer 5

您可以使用此代码 -

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

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

5 个答案: