Hello guys I'm havin some troubles with a a little program, I hope you can help me. The issue is that when I make a click in a div it suppose to add and other in the other box div, and it words fine but the problem is when I'm trying to get the index of those divs added it iterate over the all divs each time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
.contenedora {
background-color: green;
width: 300px
}
.contenedorb {
margin-top: 10px;
background-color: green;
width: 300px
}
.dentro_contenedora {
background-color: gray;
height: 40px;
margin-top: 5px;
}
.dentro_contenedorb {
background-color: gray;
height: 40px;
margin-top: 5px;
}
</style>
<script>
$(function() { // INICIO JQUERY
/*alert(2)*/
$('.dentro_contenedora').click(function() {
$('.contenedorb').append('<div class="dentro_contenedorb">uno</div>')
$('.dentro_contenedorb').click(function() {
console.log($(this).index())
})
})
}) // FIN JQUERY
</script>
</head>
<body>
<div class="contenedora">
<div class="dentro_contenedora">uno</div>
<div class="dentro_contenedora">dos</div>
<div class="dentro_contenedora">tres</div>
</div>
<div class="contenedorb">
</div>
</body>
</html>
This is the result when I click in them, it iterate each time
If I add directly in the console it words fine.
$('.dentro_contenedorb').click(function(){
console.log( $(this).index() )
}