0

Tengo la siguiente situación, estoy cargando un código desde Php hacia html con jquery. Lo que me esta sucediendo es que desde el código que estoy imprimiendo desde Php cuando me lo muestra en el html no me reconoce el jquery selector (a.deleteComec) que estoy imprimiendo desde Php. A continuación les dejo el código para ver si me pueden ayudar. Gracias.

Código de Php

        foreach ($datos as $val){ 
            if($usuario == $val['idusuario']){ 
            echo '<div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title" >'.$val['nombre']." ".$val['fechahora'].'<div class="text-right"><a class="deleteComec" id="'.$val['id'].'" href="#" title="Borrar">Borrar</a></div></h3>
                </div>
                <div class="panel-body">'. 
                        $val['comentario']
                .'</div>
            </div>';

            }else{ 

            echo '<div class="panel panel-warning ">
                <div class="panel-heading">
                    <h3 class="panel-title" >'.$val['nombre']." ".$val['fechahora'].'<div class="text-right"><a class="deleteComec" id="'.$val['id'].'" href="#" title="Borrar">Borrar</a></div></h3>
                </div>
                <div class="panel-body">'.
                     $val['comentario']
                .'<div>
            </div>'; 
            }
        } 

Carga del contenido hacia el html con jquery

var cargarmensaje = function(){
    idcoment = $("input#id").val();  
    $.post("index.php?c=pendientes&f=getcomentario",{id: idcoment},function(data){
        $("#listcomentario").html( data );
    });  
}

Donde se ejecuta el selector (a.deleteComec)

$('a.deleteComec').on("click",function () {
    id = $(this).attr('id');
    bootbox.confirm("Está eguro que desea borrar. Recuerde que al borrar, se eleminaran todos los datos asociados en Cascada", function (result) {
        if (result) {
            $("div#idloader").addClass("loader");
            $.post('index.php?c=' + a_id[1] + '&f=delComec', {id:id}, function (data) {
                cargarmensaje();    
                $(".loader").fadeOut("slow");                
            });
        }
    });
});

Como se muestra el código en el navegador

<a class="deleteComec" id="144" href="#" title="Borrar">Borrar</a>
2
  • ¿Y por qué usas PHP para eso? ¿Qué es lo que está en el servidor y no en el cliente para que tengas que usar PHP?
    – A. Cedano
    Commented el 26 jul. 2018 a las 23:26
  • intenta modificar tu jquery de esta manera : $(document).on('click', "a.class", function() { var liId = $(this).attr("id"); });
    – simon
    Commented el 26 jul. 2018 a las 23:28

2 respuestas 2

1

Te comento, esto sucede por el orden en que se asocian los eventos a los elementos dinamicos. Lo que podrías hacer es refrescar el listenner, primeros quitando los handlers y luego los ReAsocias

function RefreshEventsListener() {
   //quitamos
    $("#listcomentario .a.deleteComec").off(); 

    //ReAsociamos
    $("#listcomentario .a.deleteComec").on("click", function() {
       //tu codigo
    }
}

Luego a esta función la puedes agregar cuando creas necesario. Por defecto en el $(document).ready

 $(document).ready(function() {    
    RefreshEventsListener();
 });

O cuando creas que se agregan mas elementos a esa clase por ejemplo un ajax

var cargarmensaje = function(){
    idcoment = $("input#id").val();  
    $.post("index.php?c=pendientes&f=getcomentario",{id: idcoment},function(data){
        $("#listcomentario").html( data );
    //Asociamos los eventos
  RefreshEventsListener();
    });  
}
1
  • 1
    Gracias a todos por su ayuda Commented el 27 jul. 2018 a las 14:34
0

El problema es que .on() solo funciona en elementos existentes y no directamente en elementos dinamicos. Intenta cambiar tu selector a esto:

$('#listcomentario').on('click', 'a.deleteComec', function() {

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.