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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.