How to take ID of inputs generated within DIV dynamically'

Question

I would like to know how to get the ID of Hidden inputs that were generated dynamically within DIV via Jquery.

I’ve tried it this way but it doesn’t work:

$(document).on('click', '.div_desc_prod', function() {
    alert($(".id_produto").val());
});

Where . div_desc_prod refers to each dynamically generated div and . id_product refers to each generated input within each dynamic div.

---

I don’t think I could express my case very well... I do not need to generate the Divs with dynamic Ids, the Divs are generated from a selection in the Menu, for example, when selecting in the Menu the Traditional Pizzas Category, will be generated on the screen the amount of DIV with each Pizza within that category in each DIV, and in each DIV already has an Hidden input with the ID of each listed pizza. Then I need to select the desired pizza ID by clicking on the DIV to play in the shopping cart.

---

It is not only 1 ID, there may be 1 or several, for example:

<div class="div_desc_prod" id="div_desc_produto">
    <input type="hidden" name="id_produto" value="'+ obj.id +'">
</div>

This div can be generated 1 or several times with different Ids, so when you click on a certain DIV I want to get the ID of the one that is being clicked.

Answer 1

You can use $(this) to access the element you clicked on. Then just search for the input element inside that element and get the value.

Taking your example would look like this:

$(document).on('click', '.div_desc_prod', function() {
    alert($(this).find("input").val());
});

Answer 2

If it really is an ID, it has to be like this:

alert($("#id_produto").val());

Updating:

var html;
for(var i=0; i<=$('.div_desc_prod').length; i++){
       html = '<div class="div_desc_prod" id="div_desc_produto'+i+'">'+
              '<input type="hidden" name="id_produto" value="'+ obj.id +'">'+
              '</div>';
       $('.container').append(html);
}