Necesito de su ayuda, ya que me encuentro realizando una lista dinámica para el cobro de unos servicios, lo que quiero realizar es detectar el nuevo árbol de nodos agregados(fragmento HTML nuevo) de forma dinámica, esto con la finalidad de acceder al select de cada fila agregada y agregar los servicios disponibles desde la BD, ya investigue y lo intente hacer con MutationObserver
pero no se que estoy haciendo mal, ya que solo modifica la primera fila y no la que se acaba de agregar.
El contexto es que al generar cada select(producto o servicio) se cargara con los datos de servicios o productos que un cliente pudo haber adquirido en una visita a la peluquería, estos pueden ser uno o varios, por eso obtengo los datos del Array como ejemplo de la BD, esta lista se ira sumando en un total que dará el costo total para dicho cliente.
window.addEventListener('DOMContentLoaded', function() {
let dataServices = [{
"ID": "1",
"NOM_SERV": "CORTE DE PELO",
"PRECIO": "60"
},
{
"ID": "2",
"NOM_SERV": "CORTE DE NIÑO",
"PRECIO": "50"
},
{
"ID": "3",
"NOM_SERV": "CEJA",
"PRECIO": "30"
}
];
//FUNCION PARA AGREGAR LAS OPTIONS AL SELECT RECIEN AGREGADO
function optionsServices(dataServices, element) {
for (let j = 0; j < dataServices.length; j++) {
element.innerHTML += '<option value="1">' + dataServices[j].NOM_SERV + '</option>';
console.log(dataServices[j].NOM_SERV)
}
}
//APARTADO DEL OBSERVER
// selecciona el nodo target
var target = document.querySelector("#show_item");
// Crea una instancia de observer
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
if (m.type == 'childList') {
var targetNewElement = m.target.children[2].children[0].children[0];
console.log(targetNewElement);
optionsServices(dataServices, targetNewElement);
} else if (m.type == 'attributes') {
}
});
});
// Configura el observer:
var config = {
attributes: true,
childList: true,
characterData: true
};
// pasa al observer el nodo y la configuracion
observer.observe(target, config);
document.addEventListener('click', function(e) {
if (e.target.classList.contains('add_item_btn') && e.target.tagName === 'BUTTON') {
e.preventDefault();
let containerItems = document.getElementById('show_item');
containerItems.innerHTML += '<div class="append_item">' +
'<div class="item">' +
'<select class="services" name="product[]" required>' +
'<option value="">SELECCIONE</option>' +
'</select>' +
'<span class="price">200</span>' +
'<button class="remove_item_btn">Cancelar</button>' +
'</div>' +
'</div>';
} else if (e.target.classList.contains('remove_item_btn') && e.target.tagName === 'BUTTON') {
e.preventDefault();
let row_item = e.target.parentNode.parentNode;
row_item.remove();
total();
}
})
document.addEventListener('change', function(e) {
if (e.target.classList.contains('services') && e.target.tagName === 'SELECT') {
total();
}
})
function total() {
let elementPrice = document.querySelectorAll('.price');
let total = 0;
elementPrice.forEach(el => {
total = parseInt(el.textContent) + total
//console.log(parseInt(el.textContent))
});
console.log(total)
document.getElementById('total').innerText = '$' + total;
}
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main class="page payment-page">
<section class="payment-form dark">
<div class="container">
<div class="block-heading">
<h2>Lista de cobro de productos y servicios</h2>
<p></p>
</div>
<form action="#" id="form">
<div id="show_item" class="products">
<h3 class="title">Productos o Servicios</h3>
<button class="add_item_btn">Agregar</button>
</div>
<input type="submit" value="Registrar">
<div>
<div class="">Total <span id="total"></span></div>
</div>
</form>
</div>
</section>
</main>
</body>
</html>
.innerHTML +=
, cuando deberías usar.append
. 2) Cuando generas el HTML de la fila, no creas losoption
para elselect
. 3) Cuando creas losoption
no guardas ni elid
ni elprecio
. 4) Cuando detectas el cambio en losselect
no cambias elprecio
, por lo que eltotal
va a ser incorrecto.