I do not recognize the id of a past input from php with ajax

Question

I do not recognize the id of a past input from php with ajax

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

1

This is the PHP code that performs a query and generates the 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;
    }
}

However, in the click event of #ef of the HTML generated in

jquery ajax

asked by bsg 22.04.2017 в 22:19

source

3 answers

2

I guess you have something like that

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

The problem is that when the charge document did not exist $ ("# ef")

what you have to do is add your function on click after calling ajax

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

if you did it with $ .post:

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

answered by 22.04.2017 в 22:32

1

You do not have to escape the HTML identifiers with \ . You can write like this:

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

I'll give you this example, which works. You can try it by clicking on run and then on the button.

The verification of the Document Ready I have used it simply with $(function() , since, the way in which we verify it habitually has happened from jQuery 3 to the state deprecated and it will disappear in jQuery 4, by that is recommended now using function as it appears in the example. See this answer at the end .

<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>

answered by 22.04.2017 в 22:36

Print list of objects in java Doubt syntax initializing jQuery statement

score 3 · Accepted Answer

The form used by $("#ef").on('click',function(){...} will work for existing elements in DOM , but not for new elements that come via Ajax

To solve this detail of adding elements dynamically to DOM the correct way to use the method on is

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