El problema que enfrentas es común cuando trabajas con elementos que se agregan dinámicamente al DOM. En tu código, estás utilizando un evento de jQuery vinculado a elementos con la clase
.sendms utilizando
.on('input', ...), que solo se aplica a los elementos existentes en el DOM en el momento de la carga.
Para manejar elementos que se agregan dinámicamente, asegurándote de que el evento funcione con los nuevos elementos, deberías utilizar la delegación de eventos. Esto implica adjuntar el evento a un contenedor que ya exista en el DOM, en lugar de a los elementos en sí.
Aquí te muestro cómo puedes hacer esto:
### Ajusta el evento 'input'
Cambia tu código de la siguiente manera para usar delegación de eventos:
JavaScript:
$(document).ready(function(){
// Usar delegación de eventos para el evento 'input'
$(document).on('input', '.sendms', function(){
var inputValue = $(this).val();
var dataid = $(this).attr('dataid');
$(".intercomu").remove(); // Eliminar sugerencias anteriores
var matches = inputValue.match(/@(\w+)/g);
if(matches){
var lastMention = matches[matches.length - 1];
var lastMentionIndex = inputValue.lastIndexOf(lastMention);
if(lastMentionIndex + lastMention.length < inputValue.length && !inputValue[lastMentionIndex + lastMention.length].trim()){
return;
}
$.get("../hola.php",{
searpro: lastMention,
prosear: matches
}, function(data){
const modifiedData = data.replace(/<cite class="lobre" /g, '<cite class="lobre" datainput="'+dataid+'" ');
$('<div class="intercomu cls' + dataid + '">Estás buscando ' + lastMention + ' ' + modifiedData + '</div>').insertAfter($(this));
}.bind(this));
}
});
// Manejar el click en .lobre elementos
$(document).on("click", ".lobre", function(){
var dataidValue = $(this).attr("datauser");
var dataidInput = $(this).attr("datainput");
$('.sendms[dataid="' + dataidInput + '"]').val(function(i, text) {
var mentionIndex = text.lastIndexOf('@');
if(mentionIndex !== -1){
$(".intercomu").remove();
return text.substring(0, mentionIndex) + "@" + dataidValue + " ";
} else {
$(".intercomu").remove();
return "@" + dataidValue + " ";
}
}).focus();
});
// Manejar el evento blur para eliminar sugerencias
$(document).on('blur', '.sendms', function() {
setTimeout(function() {
$(".intercomu").remove();
}, 400);
});
});
### Cambios realizados:
1.
Delegación de eventos: Cambié
.on('input', '.sendms', ...) para que el evento se aplique a cualquier elemento
.sendms, ya sea existente o agregado dinámicamente.
2.
Delegación para blur: Usé la delegación también para el evento
blur.
### Esperado:
Con estos cambios, todos los elementos nuevos con la clase
.sendms que se agreguen al DOM deberían funcionar correctamente con la lógica que has implementado.
if(document.querySelector('#form_subir')){
var uploadField = document.getElementById("fileclip");
uploadField.onchange = function(){
if(this.files[0].size > 11000000){
document.getElementsByClassName("libret")[0].style.display="none";
$(".wunner").css({"position":"absolute","height":"100%","width":"100%"});
document.getElementsByClassName("pos1")[0].checked = true;
document.getElementsByClassName("lt1")[0].style.display="block";
document.getElementsByClassName("lt2")[0].style.display="none";
document.getElementsByClassName("samts")[0].style.display="block";
$(".flecha").html("Publicando post").css({"display":"block","color":"#000"});
document.getElementById("requid").required=true;
this.value = "";
}else{
document.getElementsByClassName("libret")[0].style.display="block";
$(".wunner").css({"position":"absolute","height":"100%","width":"100%"});
document.getElementsByClassName("pos1")[0].checked = true;
document.getElementsByClassName("lt1")[0].style.display="block";
document.getElementsByClassName("lt2")[0].style.display="none";
document.getElementsByClassName("samts")[0].style.display="none";
$(".flecha").html("Publicando post").css({"display":"block","color":"#000"});
document.getElementById("requid").required=false;
pimor();
}
}
document.addEventListener("DOMContentLoaded", () =>{
let form = document.getElementById("form_subir");
form.addEventListener("submit", function(event){
event.preventDefault();
subir_archivos(this);
});
});
function subir_archivos(form){
let barra_estado = form.children[1].children[0],
span = barra_estado.children[0],
boton_cancelar = form.children[2].children[1];
barra_estado.classList.remove("barra_verde", "barra_roja");
//peticion
let peticion = new XMLHttpRequest();
//progreso
peticion.upload.addEventListener("progress", (event) =>{
let porcentaje = Math.round((event.loaded / event.total) * 100);
console.log(porcentaje);
barra_estado.style.width = porcentaje + "%";
span.innerHTML = porcentaje + "%";
document.getElementsByClassName("barra")[0].style.display="block";
document.getElementById("form_subir").style.pointerEvents="none";
});
//finalizado
peticion.addEventListener("load", () =>{
barra_estado.classList.add("barra_verde");
span.innerHTML = "Proceso completado";
document.getElementById("form_subir").reset();
document.getElementsByClassName("barra")[0].style.display="none";
document.getElementById("form_subir").style.pointerEvents="auto";
document.getElementById("form_subir").setAttribute("data-id", "truth");
document.getElementsByClassName("libret")[0].style.display="none";
$(".wunner").css({"position":"absolute","height":"100%","width":"100%"});
document.getElementsByClassName("pos1")[0].checked = true;
document.getElementsByClassName("lt1")[0].style.display="block";
document.getElementsByClassName("lt2")[0].style.display="none";
$(".flecha").html("Publicando post").css({"display":"block","color":"#000"});
document.getElementById("requid").required=true;
proonk();
});
//enviar datos
peticion.open("post", "upload.php");
peticion.send(new FormData(form));
//cancelado
boton_cancelar.addEventListener("click", () =>{
peticion.abort();
barra_estado.classList.remove("barra_verde");
barra_estado.classList.add("barra_roja");
span.innerHTML = "proceso cancelado";
});
}
}
puedes hacer que funcione en los nuevos form_subir agregados al dom?
