How to recover the attribute of a dynamically created element?

Asked

Viewed 1,291 times

2

The elements are generated dynamically, thanks to this 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 generated dynamically and placed inside a div with certain id:

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

So far so good, 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 recover the value of the attribute quantidade_item that was generated dynamically along with the link a... However as he has no event attached to it I can’t recover along with the on.

Does anyone have any solution?

javascript jquery

  • If you use the class instead of the ID to select the component, the events associated with it will also be attached to the new controls created with the same class. Ex: $('.classe_deste_e_dos_novos_componentes').on('click'....

  • I didn’t understand @Caffé could explain better?

  • It was I who did not understand your question. If the new elements are created within the div #conta_selecionada and whether these new elements receive the soma_item_conta, then the way you associate code to the event click these new elements ($('#conta_selecionada').on('click','.soma_item_conta',function(){...) is correct. Each new element, when clicked, must trigger its code because the event was associated with a previously existing element (#conta_selecionada) and delegated to their class child elements soma_item_conta'. So that I could not understand his problem.

  • Friend Thank you next the elements are created dynamically the quantity_item attribute is not son of soma_item_account but brother. and it has no event associated with it just need to get the value of attr.

  • Edit the question to make it clearer. Consider showing more relevant html and Javascript. Consider also showing the already solved html instead of the string concatenations. I have the impression that your doubt can be very easily resolved here in the OS as long as it is properly formulated.

3 answers

2


A Quick Fix would be to place the function call directly in 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>

This one I would say is not the best-case scenario, but I think it would help you.

  • I thought about it but I didn’t want to escape the pattern.

0

Another solution would be:

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

       });
}

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

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

  selecionaConta();
}

I hope it helps now :)

0

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 .ui-block-a which is the sister of the link (.ui-blok-b):

$('#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: for your HTML to be valid, you cannot have custom attributes like "quantity_item". Add prefix data- the attribute name would solve this problem.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.