1

Lo que pasa es que tengo esta funcion:

   //
   $("input:checkbox").on('click', function(e) {
          ...

        $('#contentPageMain').on('click', '.page-edit', function(){ 
          ...
        });
   });

Dependiendo la cantidad de veces que le de click a los chekbox, esa cantidad se acumula en la segunda funcion, ya que la segunda funcion lo que hace es añadir elementos dinamicamente por medio de append Entonces si tengo 2 checkbox y primero le doy click a uno y luego al otro y luego cuando quiero darle click al div page-edit se insertan dos elementos, eso quiere decir que la segunda función se ejecuta dos veces y no se por que pasa eso.

Edit:

Codigo completo de las dos funciones:

$("input:checkbox[name=checkElements]").on('click', function(e) {


    let checkCliqueado = null;

    //el check al que se hizo click
    checkCliqueado = $(this); 

    console.log(checkCliqueado);

    if(checkCliqueado.is(":checked")){
        
        var groupChecks = "input:checkbox[name='" + checkCliqueado.attr('name') + "']";
        $(groupChecks).prop("checked", false);

        checkCliqueado.prop("checked", true);

    }else{

        checkCliqueado.prop("checked", false);

    }

    // ========================

    if($(checkCliqueado).is(':checked')){

        $('.page-edit').css('cursor','url("assets/img/imagesInforme/cursorAdd.png"), crosshair');

   

        $('#contentPageMain').on('click', '.page-edit', function(e){


            let idPage = $(this).attr('id');

            var positionX =  parseInt(sessionStorage.mouseX);
            var positionY =  (parseInt(sessionStorage.mouseY) + parseInt(sessionStorage.mouseYZ));

            var valueCheck = null;
            valueCheck = checkCliqueado.attr('value');
            console.log(valueCheck);
            var contadorTextID = $('.element-text-editable').length + 1;
            var contadorElementos = $('.ui-widget-content').length + 1;
            templateHTML = null;

            if(valueCheck === 'tarjeta1'){

                templateHTML = `
                    <div class="row mb-5">                          
            
                        <div style="width:100%; float: left;">
                    
                            <div class="card" style="border: 1px solid #e9ecef;">
                                <div class="card-header bg-custom py-2 elemento-editable" style="background-color: #5e72e4;">
                                    <h5 style="color: #fff;" class="mb-0 elemento-editable font-bold" id="tituloCard1" data-elemento="texto" data-page="page1" contenteditable="true"><span class="fa" contenteditable="false">&#xf05a;</span> Descripción del informe</h5>
                                </div>
                                <div class="card-body py-3 px-4">

                                    <p class="text-justify mb-0 elemento-editable" id="parrafo1" data-elemento="texto" data-page="page1" contenteditable="true">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                    Nullam accumsan libero non massa maximus dapibus. Curabitur 
                                    nec pulvinar mi. Vestibulum pellentesque massa non congue gravida. 
                                    Etiam eget vulputate nisi, sit amet congue turpis. Cras varius nunc felis, 
                                    vel scelerisque nunc malesuada at. Etiam sollicitudin neque eget volutpat luctus. 
                                    Donec eu pellentesque felis, sit amet iaculis erat. Maecenas egestas libero eu leo 
                                    luctus, et bibendum nisl vestibulum. Aliquam lacus ante, faucibus hendrerit porta ac, 
                                    volutpat ut metus. Duis finibus libero vel orci tempor, venenatis 
                                    sagittis tortor fringilla. Sed eget erat et orci laoreet bibendum id a ante.
                                    </p>   

                                </div>
                            </div>

                        </div>
                    </div>

                `;

            }


            $('#'+idPage).append(templateHTML);
            console.log(idPage);
            
            
        });
        
    }else{

        $("#contentPageMain").off('click');
        $('.page-edit').css('cursor','auto');

    }

});

Yo evaluo mediante un if el value del checkbox checkeado y segun eso inserto el elemento. lo que pasa es que se estan acumulando los manejadores de eventos.

4
  • 1
    Si utilizas .append, lo que hace es que va agregando elementos al final de otro elemento(page-edit) sin quitar los ya existentes, podrías utilizar .html para reemplazar todos los elementos y agregar uno nuevo dentro de tu div. Commented el 28 mar. 2019 a las 15:36
  • No, lo que yo quiero es que se vayan agregando uno debajo del otro en el div 'page-edit', osea esta bien asi, lo que pasa es que yo depure el codigo javascript por medio del navegador y me di cuenta que la segunda funcion se ejecutaba dependiendo el numero de veces que yo le diera click a los checkbox, si me hago entender? Commented el 28 mar. 2019 a las 15:37
  • 1
    Ha ok entiendo, y porque tienes un evento click dentro de otro?, no sería mejor utilizarlos individualmente?, porque en tu codigo estas diciendo que cada vez que hagas clic a tu cualquier checkbox va a ejecutar el evento click de page-edit. Commented el 28 mar. 2019 a las 15:47
  • Lo que pasa es que, al momento de darle click a un checkbox, la segunda funcion esta en 'espera' para que cuando le de click al div 'page-edit' se inserte el elemento, segun el checkbox que este checkeado. meto una funcion dentro de otra, para que la segunda funcion solo se ejecute si hay un checkbox checkeado. Commented el 28 mar. 2019 a las 15:52

2 respuestas 2

3

Porque estás acumulando event handlers (manejadores de eventos). Te pongo un ejemplo de lo que estás haciendo, sencillo:

let checkbox = $('#check');
let elemento = $('#elem');
let boton = $('#btn');

checkbox.on('click',function() {
  let texto = elemento.val();
  console.log('Añado un event handler al botón');
  let contador = 1;
  boton.on ('click', function () {
    console.log('Ejecución nª', contador ++);
    $('#div').append(`<p>${texto}</p>`);
  });
});
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" name="check"/>
<label for="check"> Marca aquí y luego dale al botón para añadir elementos</label>
<input id="elem" type= "text" value="Algo"/>
<button id="btn">Añade elementos</button>
<div id="div">

</div>

Prueba a hacer click en el check, pulsar el botón, luego en el check de nuevo y leugo en el botón

5
  • Exacto amigo, eso es lo que pasa!!! pero ahora como hago para que la función que inserta, solo se ejecute una ves? gracias, mis respetos. Commented el 28 mar. 2019 a las 15:56
  • 1
    Con tan poco código no sé lo que quieres hacer, exactamente, así que no te puedo decir: las opciones podrían ser: usar $('#contentPageMain').one(... (el manejador se ejecuta una vez y se elimina de la lista) o sacar la asignación de manejadores del manejador del checkbox Commented el 28 mar. 2019 a las 15:59
  • Espera, ya voy a agregar mi codigo completo Commented el 28 mar. 2019 a las 16:02
  • Amigo ya añadi el codigo de las dos funciones, creo que logras entender que hacen verdad? o necesitas tambien el HTML? Commented el 28 mar. 2019 a las 16:06
  • Ya probe con el .one y funciono!!! gracias muchisimas gracias, amigo. sin embargo aun no me queda claro a que te refieres con 'sacar la asignación de manejadores del manejador del checkbox', me podrias explicar porfavor?, siempre es bueno saber por que pasan las cosas. Commented el 28 mar. 2019 a las 16:10
0

Finalmente pude resolver el problema y encontre dos soluciones:

  1. Colocando e.stopInmediatePropagation(); esto evita que el resto de los controladores se ejecuten y evita que el evento burbujee en el árbol DOM.

Por la cual, los event handlers ya no se van a acumular.

   $("input:checkbox").on('click', function(e) {
      ...

    $('#contentPageMain').on('click', '.page-edit', function(){ 

       e.stopImmediatePropagation();

    });

});

  1. Remplazando .on por: .one, asi evitamos que los event handlers se acumulen, ya que el manejador se ejecuta una vez y se elimina de la lista.
$('#contentPageMain').one('click', '.page-edit', function(e){
...

});

Ojala esto les sirva a otras personas que tambien se encontraron con este problema :)

Saludos.

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.