The jquery .on event does not occur to me

Question

The jquery .on event does not occur to me

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have the following situation, I am loading a code from Php to html with jquery . What is happening to me is that from the code I'm printing from Php when I show it in the html I do not recognize the jquery selector ( a.deleteComec ) that I'm printing from Php . Then I leave the code to see if you can help me. Thank you.

Php code

        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>'; 
            }
        }

Upload the content to the html with jquery

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

Where the selector runs (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");                
            });
        }
    });
});

As the code is displayed in the browser

<a class="deleteComec" id="144" href="#" title="Borrar">Borrar</a>

jquery php php5

asked by Yoel Rodriguez 27.07.2018 в 01:20

source

2 answers

0

The problem is that .on() only works on existing elements and not directly on dynamic elements. Try changing your selector to this:

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

answered by 27.07.2018 в 01:29

How to recover a field from a foreign key, to be used in another form without modifying the field to recover? Banner bootstrap with 2 responsive images

score 1 · Accepted Answer

I tell you, this happens in the order in which the events are associated with the dynamic elements. What you could do is refresh the listenner , first removing the handlers and then the ReAsocias

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

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

Then you can add it to this function when you think it's necessary. By default in $(document).ready

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

Or when you think that more elements are added to that class, for example an 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();
    });  
}