0

Buenas, resulta que los eventos "click" escuchan tanto en el selector que estoy marcando con $(document) como en los que están por arriba, aunque no sean sus hijos y no se llamen igual.

Para verlo, os pongo el código de las tres páginas:

tengo 3 páginas:

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>   

<div><?php include "page1.php"; ?></div>
<div><?php include "page2.php"; ?></div>

page1.php

<button id="add">Add</button>
<script>
$(function () {
    var i = 0;
    $(document).on('click', i, '#add',  function(  ){
        //alert ("page1");
        i+=1;
        alert (i);
        var the_html = '<button class="my_class">Alert</button>';
        $("#my_table").append(the_html);
    }); 
});
</script>

page2.php

<div id="my_table"> 
</div>
<button id="clean">Clean</button>
<script>
$(function () {
    $(document).on('click', '.my_class',  function(){
        alert ("page2");
    });

    $(document).on('click', '#clean',  function(){
        $(".my_class").off();
        $("#my_table").html("");        
    });

});
</script>
4
  • podrias usar la palabra reservada this, para que afecte unicamente al elemento que le das click y no al resto Commented el 12 ene. 2018 a las 13:14
  • Hola Edwin, gracias por responder. He cambiado todos los $(document) por $(this) y el efecto es el mismo. Es decir, que si le doy click al botón "alert" cuya clase es "my_class", primero lanza el evento click de su clase (bien), pero después lanza el evento click del botón "Add" (mal). Commented el 12 ene. 2018 a las 13:23
  • Puedes incluir el codigo html para ver en que parte y a que exactamente le estas declarando las clases Commented el 12 ene. 2018 a las 13:27
  • Edwin muchas gracias! Han respondido más abajo con el código corregido. Lo he modificado un poco para darle una ID a cada div y así, en lugar de ejecutarse para todo el document, se ejecuta solamente para el div correspondiente. Commented el 12 ene. 2018 a las 13:45

2 respuestas 2

2

Según la documentación de $.on() El footprint para el método es:

.on( events [, selector ] [, data ], handler )

Cuando usas el parámetro data la función handler (que por defecto recibe como parámetro el event) puede acceder a esos datos mediante event.data.

$(document).on('click','#selector',{nombre:'juan'},function(event) {
   console.log(event.data.nombre);
   // imprime 'juan'
});

De la manera como la estás declarando, tu listener recibe i como selector y #add como event.data, o sea los parámetros estás al revés. Además, poner como selector algo que no es un selector va a generar un listener que escuche a todos los clicks del documento.

Si lo que quieres es pasarle a la función el valor de i, debiera ser

$(document).on('click',  '#add', i, function(){ ... }

Pero ya que i es una variable fuera del scope de la función, en realidad esto no es necesario. Y no va a funcionar porque evalúa i como 0 cuando es declarada. O sea es lo mismo que poner:

$(document).on('click',  '#add', 0, function(){ ... }

Te dejo un código en donde, en cambio, manejo el contador de las filas internamente usando un data attribute del botón "Agregar Modificado".

$(function () {
    var i = 0;
    $(document).on('click', '#add',i,  function(event){
        i+=1;
        console.log(`i vale ${i}, event.data vale ${event.data}`);
        var the_html = '<button class="my_class">Alert</button>';
        $("#my_table").append(the_html);
    });
    $(document).on('click', '#add2', function(event){
        let _this=$(this),
            _counter=parseInt(_this.data('counter'),10);
            _this.data('counter',_counter+1);
            
        console.log(`counter vale ${_this.data('counter')}`);
        var the_html = '<button class="my_class">Alert</button>';
        $("#my_table").append(the_html);
    }); 

    $(document).on('click', '.my_class',  function(){
        alert ("page2");
    });

    $(document).on('click', '#clean',  function(){
        $(".my_class").off();
        $("#my_table").html("");        
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>   

<div>
  <button id="add">Add</button>&nbsp;
  <button data-counter="0" id="add2">Add Modificado</button>
</div>
<div><div id="my_table"></div>
<button id="clean">Clean</button></div>



 
 


 

1

no se si llego a tu respuesta pero deberia ser asi:

$(function() {
  var i = 0;
  $('#add').on('click', function() {
    i += 1;
    var the_html = '<button class="my_class">Alert</button>';
    $("#my_table").append(the_html);
  });
});

$(function() {
  $(document).on('click', '.my_class', function() {
    alert("page2");
  });

  $(document).on('click', '#clean', function() {
    $(".my_class").off();
    $("#my_table").html("");
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button id="clean">Clean</button>
<button id="add">Add</button>

<div id="my_table">
</div>

Al darle document le estas dando ese llamado del click a TODO el HTML (prueba dando click al div)

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.