[SOLUCIONADO] Se pierde funcion con ajax

[german_1441]

Hola amigos,
cuando asigno una función a un botón mediante JQUERY asignandola a través de una clase, al recargar un elemento con ajax el cual tendrá la misma clase, ya no ejecuta la acción, a que se debe? como podría solucionarlo?

Mi boton:

Código HTML:

<button class="mibtn">Alta</button>
 

Código Javascript:

$(".mibtn").on('click', function(e) {   
    $(btn).button('loading');
    $.ajax({
        url      : 'miphp.php',
        type  : 'POST',
        dataType : 'json',
        data : {opcion : "alta" }
    })
    .done(function(data){
        if(data.response=="success"){
            $("#target").html('<button class="mibtn">Alta</button>');
        );
        }else{
            alert(data.error);
        }
    })
    .fail(function(data){
        console.log("Fail");
    })
    .always(function(){
        $(btn).button('reset');
    });
 
});
 

Al crear el nuevo botón en el elemento #target, este ya no realiza la acción, como si no tuviera la clase 'mibtn'
Gracias de antemano

[Alexis88]

Lo que ocurre es que, las instrucciones definidas, solo afectarán a los elementos que hayan cargado antes de que hayan sido ejecutadas. En otras palabras, solo se afecta a los elementos fijos, no a los creados de forma dinámica.

Para poder lograr afectar a estos últimos, tienes que delegar el evento, en este caso, el evento click a un elemento ancestro del elemento creado dinámicamente.

Código Javascript:

$("#target").on("click", ".mibtn", function(){
    //Instrucciones en donde $(this) representará al botón pulsado
});
 

Un saludo

[german_1441]

Hola amigo,
Gracias por la respuesta!!!
Sin duda alguna me sirvio muchisimo, es lo que estaba buscando
Muchas gracias!
Saludos!