I don’t know how to access only one of the children of a class created dynamically. (when you click, for example, on the 5th element, then the console displays 5 times), here is an example code:

$('#next').click(function() { var rnd = Math.floor(Math.random()*1000); var html = '<div>'+rnd+'</div>'; $(html).attr('id', rnd).addClass('order').prependTo('#orders'); console.log(rnd); $('.order').click(function() //тут проблема { console.log($(this).attr('id')); }); }); 
 .order { display: block; padding: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id='next'>More</button> <div id='orders'> <div class='order'>Y</div> <div class='order'>X</div> </div>

    1 answer 1

    You call the .click () method within an already existing .click () method, which results in a recursive function call. To prevent this from happening, you need to move the second target click beyond the first function, it will work this way:

     $('#next').click(function() { var rnd = Math.floor(Math.random()*1000); var html = '<div>'+rnd+'</div>'; $(html).attr('id', rnd).addClass('order').prependTo('#orders'); console.log(rnd); }); $('body').on('click', '.order', function() //тут нет проблемы { console.log($(this).attr('id')); }); 
     .order { display: block; padding: 5px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id='next'>More</button> <div id='orders'> <div class='order'>Y</div> <div class='order'>X</div> </div>