JQuery: получить значение атрибута динамически созданного элемента

Question

Я создал div динамически, и в событии click я хочу получить его значение атрибута, но когда я пытаюсь это сделать, он вызывает ошибку. "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(); 
    }); 

Answer 1

На самом деле ошибка находится в этой строке:

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

Там нет необходимости кал. val() on .attr()

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

.attr() сам вернет значение.

Подробнее об этом см. here.

Answer 2

Удалить .val()

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

Answer 3

Поскольку вы уже используете jQuery и хотите получить атрибут данных, вы также можете сделать что-то вроде этого.

$("#target2").on("click", function(){ 
var bid=$(this).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"); 
});