1

Este es el código PHP que realiza una consulta y que genera el HTML:

if(isset($_REQUEST['ef'])){
    $sentenci = $conn->prepare("SELECT * FROM familia");
    $sentenci->execute();
    $numb = $sentenci->rowCount();
    if($numb==0){
    echo "<h5>No hay ninguna</h5>";
    }
    else{
        $cadena = "<form><table>";
        $cadena .= "<tr><th>Ciclo</th><th>Seleccionar</th></tr>";
        while($fila=$sentenci->fetch()){
            $cadena .= "<tr><td>".$fila['familia']."</td><td><input type='checkbox' name='elfam' value=\"".$fila['idfam']."\"></td></tr>";

        }
        $cadena .= "<tr><td colspan'2'><input type='button' value='enviar' id=\"ef\" class=\"btn btn-primary\"></td></tr></table><form>";
        echo $cadena;
    }
}

Sin embargo, en el evento click de #ef del HTML generado en no muestra la alerta.

$("#ef").on('click',function(){
  alert("eliminado");
});

Ajax

$.post("./php/consultas.php",{ef:""},function(data){
    $("#famel").text("");
    $("#famel").append(data);
});
2
  • donde pones la fuincion onClick? dentro de document.ready o tras tu response en la peticion ajax? Commented el 22 abr. 2017 a las 20:24
  • dentro de document.ready
    – bsg
    Commented el 22 abr. 2017 a las 20:28

3 respuestas 3

3

La forma que usa $("#ef").on('click',function(){...} funcionará para los elementos existentes en el DOM, mas no para los nuevos elementos que vienen por medio de Ajax

Para solucionar este detalle de agregar elementos dinámica mente al DOM la forma correcta de emplear el método on es

$(function() {
    $(document).on('click', '#ef', function(event) {
      alert("Eliminado");
    });
});
2

supongo que tienes algo asi

$(document).ready(function(){ 
    $("#ef").on('click',function(){
        alert("eliminado");
    });
});

el problema es que cuando el documento cargo no existia $("#ef")

lo que tienes que hacer es agregar tu funcion on click despues de llamar al ajax

$.ajax({
  method: "POST",
  url: "tu_php.php",
  data: { datos:"datos" }
})
  .done(function( msg ) {
    $("#algundiv").html( msg );
    $("#ef").on('click',function(){
            alert("eliminado");
        });
  });

si lo hiciste con $.post:

$.post("tu_php.php", { datos:"datos" }).done(function( msg) {
        $("#algundiv").html( msg );
        $("#ef").on('click',function(){
                alert("eliminado");
        });
});
3
  • mi ajax lo he hecho con $.post y el done para que sirve?
    – bsg
    Commented el 22 abr. 2017 a las 20:53
  • $.post es una abreviatura para $.ajax({ method: 'POST', .... El done() es la función que se ejecuta una vez que la petición ajax se haya completado. Commented el 22 abr. 2017 a las 20:58
  • done indica que se hace cuando ya obtuviste respuesta Commented el 22 abr. 2017 a las 20:58
1

No tienes por qué escapar los identificadores HTML con \. Puedes escribir así:

<td colspan'2'><input type='button' value='enviar' id='ef' class='btn btn-primary'></td>

Te pongo este ejemplo, el cual funciona. Lo puedes probar pulsando en ejecutar y luego en el botón.

La verificación del Document Ready la he usado simplemente con $(function(), ya que, la forma en la que lo verificamos habitualmente ha pasado desde jQuery 3 al estado deprecated y desaparecerá en jQuery 4, por eso se recomienda desde ahora usar function como aparece en el ejemplo. Ver esta respuesta al final.

<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script>
$(function() {
  $("#ef").click( function()
       {
         alert('botón funciona');
       }
  );
});
</script>

<tr>
<td colspan'2'><input type='button' value='enviar' id='ef' class='btn btn-primary'></td>
</tr>

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.