No me reconoce el id de un input pasado desde php con ajax

Question

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 jquery no muestra la alerta.

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

Ajax

$.post("./php/consultas.php",{ef:""},function(data){
    $("#famel").text("");
    $("#famel").append(data);
});

donde pones la fuincion onClick? dentro de document.ready o tras tu response en la peticion ajax? — Jorge Arturo Juarez, Apr 22 '17 at 20:24

Dev. Joel · Accepted Answer · 2017-04-22T21:09:47.397

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");
    });
});

edited Apr 22 '17 at 21:09

answered Apr 22 '17 at 20:54

Dev. Joel

23,229
3
25
44

Jorge Arturo Juarez · Answer 2 · 2017-04-22T20:58:01.120

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");
        });
});

edited Apr 22 '17 at 20:58

answered Apr 22 '17 at 20:32

Jorge Arturo Juarez

2,813
1
11
24

mi ajax lo he hecho con $.post y el done para que sirve? – bsg Apr 22 '17 at 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. – javiertapia Apr 22 '17 at 20:58
done indica que se hace cuando ya obtuviste respuesta – Jorge Arturo Juarez Apr 22 '17 at 20:58

A. Cedano · Answer 3 · 2017-04-22T20:49:45.793

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>

No me reconoce el id de un input pasado desde php con ajax

3 Answers3