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 declick
a loschekbox
, esacantidad
se acumula en la segundafuncion
, ya que la segundafuncion
lo que hace esañadir elementos dinamicamente
por medio deappend
Entonces si tengo2 checkbox
y primero le doyclick
a uno y luego al otro y luego cuando quiero darleclick
al divpage-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"></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.