How to retrieve the attribute of a dynamically created element?

Question

How to retrieve the attribute of a dynamically created element?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

2

Elements are dynamically generated, so it does not exist in the DOM. My case is the following:

<div class="ui-grid-a">';
<div class="ui-block-a">'+row.nome_item+' id '+row.id_item_conta+'<div class="valor_quantidade" quantidade_item="'+quantidade+'">'+quantidade+' X '+row.valor_item+'</div></div>
<div class="ui-blok-b"><a href="javascript:0" id_item_conta="'+row.id_item_conta+'" class="ui-btn ui-icon-plus ui-btn-icon-right soma_item_conta" style="background: none; border: none;float:right;margin-top:5px;"></a><a href="javascript:0" id_item_conta="'+row.id_item_conta+'" class="ui-btn ui-icon-minus ui-btn-icon-right diminui_item_conta" style="background: none; border: none;float:right;margin-top:5px;"></a></div>
</div>

These elements are dynamically generated and placed within a div with given id :

<div id="conta_selecionada"></div>

So long, notice that there is a link with class soma_item_conta to recognize this link is easy because there is an event attached to it. >

$('#conta_selecionada').on('click','.soma_item_conta',function(){
     //alert('TETSE');        
});

But then my problem begins. I need to retrieve the value of the quantidade_item attribute that was dynamically generated along with the link a ... But as it has no event attached to it I can not recover along with on .

Does anyone have a solution?

javascript jquery

asked by anonymous 15.01.2015 / 20:58

3 answers

Eclipse does not show java attribute hint Error ORA-01460 in Oracle

score 1 · Answer 1

A quick fix would be to place the function call directly on your dynamically created element. Example:

function selecionaConta() {
       $('#conta_selecionada').on('click','.soma_item_conta',function(){
          //alert('TETSE');

       });
}

<div class="ui-blok-b"><a href="javascript:0" onclick="selecionaConta()" id_item_conta="'+row.id_item_conta+'" class="ui-btn ui-icon-plus ui-btn-icon-right soma_item_conta" style="background: none; border: none;float:right;margin-top:5px;"></a><a href="javascript:0" id_item_conta="'+row.id_item_conta+'" class="ui-btn ui-icon-minus ui-btn-icon-right diminui_item_conta" style="background: none; border: none;float:right;margin-top:5px;"></a></div>

I would say that this is not the best scenario, but I think it would help.

score 0 · Answer 2

Another solution would be:

function selecionaConta() {
       $('#conta_selecionada').on('click','.soma_item_conta',function(){
          //alert('TETSE');

       });
}

Take the script or event that creates your dynamic elements and call your script.

function criaEelmentos() {
  //cria seus elementos dinâmicos aqui

  selecionaConta();
}

I hope you now help:)

score 0 · Answer 3

You need to navigate to the element that contains the attribute, based on where it is relative to the clicked element. In this case, it is in a% div that is the sister of the one containing the link ( .ui-block-a ):

$('#conta_selecionada').on('click','.soma_item_conta',function(){
    var container = $(this).closest('.ui-blok-b');
    var anterior = container.prev('.ui-block-a');
    var alvo = anterior.find('.valor_quantidade');
    var valor = alvo.attr('quantidade_item');
    alert(valor);
});

One detail: In order for your HTML to be valid, you can not have custom attributes such as "Quantity_item". Adding the .ui-blok-b prefix to the attribute name would solve this problem.