1

soy nuevo en el tema de Javascript, resulta que estoy agregando dos etiquetas html (label, input) a mi html por Javascript utilizando prepend, para la utilización de un menú responsive, el problema surge que cuando hago click en el icono del menú y me muestra los items de Menu y al hacer click en uno de estos enlaces, se direcciona a dicho enlance, pero el problema es que cuando direcciona, se duplica el (label y el input) del icono del menú responsive y se sigue generando un nuevo input y label cada vez que hago click en los enlaces. Alguno me puede hacer el favor de ayudarme con una solución para que no se duplique los elementos (label e input)? Por razones de seguridad, no puedo mostrar todo el código, pero mostraré el código javascript que utilicé para generar el input y el label en el html. Muchas gracias

Ajusto la pregunta agregando el código:

$('.botoneraMain > .k-menu-scroll-wrapper').prepend('<label for="check" class="checkbtn"><i class="fa fa-bars"></i></label>');                  
$('.botoneraMain > .k-menu-scroll-wrapper').prepend('<input type="checkbox" id="check">');
.wrap-menu-extended {
    width: 100%;
}
.checkbtn {
    font-size: 25px !important;
    color: white;
    float: right;
    line-height: 40px !important;
    margin-left: -30px;
    margin-right: 18px;
    cursor: pointer;
    display: none;
    background-color: #92b711;
    padding: 0rem 0.8rem;
    border-radius: 4px;
}
#check{
  display: none;
}
@media (max-width: 952px){
  .cabeceraMain .k-menu-horizontal li span{
    font-size: 16px;
  }
}
@media (max-width: 952px){
  .k-menu-scroll-wrapper{
    width: 100% !important;
  }
}
@media (max-width: 952px){
  .k-menu-scroll-button{
    display: none !important;
  }
}
@media (max-width: 952px){
  .loginMain{
    margin-right: 18px;
  }
}
@media (max-width: 952px){
  .logoMain .header-logo{
    margin-top: 0;
    margin-left: -88px;
  }
}
@media (min-width: 952px){
  .k-menu-scroll-wrapper{
    width: 100% !important;
    margin-left: 116px;
  }
}
@media (max-width: 575.98px){
.checkbtn {
    margin-right: 5px !important;
}
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
    float: right;
    margin-right: -102px;
  }
  .k-menu-horizontal{
    display: block;
    position: fixed;
    width: 100%;
    height: auto;
    background: #2c3e50;
    top: -80px;
    left: 0;
    text-align: center;
    transition: all .5s;
  }
  .cabeceraMain .k-menu-horizontal li{
    display: block;
    margin: 14px 0 !important;
    line-height: 30px;
    margin-right: 20px;
  }
  .cabeceraMain .k-menu-horizontal li span{
    font-size: 20px;
    justify-content: center;
  }
#check:checked ~ .k-menu-horizontal {
    display: block;
    width: 100% !important;
    max-height: 50%;
    margin-top: 0px;
    top: 80px;
    left: 0px !important;
    background-color: #fffcfa;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/prueba.css" charset="UTF-8" type="text/css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./js/prueba.js"></script>
    <div class="botoneraMain" id="divMenuContent">
    <div class="k-menu-scroll-wrapper horizontal" style="width: 204px;">
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <ul id="menu" data-role="menu" class="k-widget k-reset k-menu k-menu-horizontal" aria-orientation="horizontal" tabindex="0" role="menubar" style="width: 204px;">
            <li>
                <span class="k-link k-menu-link">Uno</span>
            </li>
            <li>
                <span class="k-link k-menu-link">Dos</span>
            </li>
            <li>
                <span class="k-link k-menu-link">Tres</span>
            </li>
        </ul>
    </div>
    </div>

</body>
</html>

introducir la descripción de la imagen aquí

2
  • Muy complicado colaborarte si no puedes compartir el código... revisa Cómo preguntar. Saludos.
    – Pipe
    Commented el 28 feb. 2022 a las 18:17
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 28 feb. 2022 a las 20:58

1 respuesta 1

0

Deberías verificar en el javascript si lo que quieres añadir ya existe para no crearlo de nuevo:

  if ($('#label-botonera').length == 0) {
    $('.botoneraMain > .k-menu-scroll-wrapper').prepend('<label for="check" class="checkbtn" id="label-botonera"><i class="fa fa-bars"></i></label>');                  
    $('.botoneraMain > .k-menu-scroll-wrapper').prepend('<input type="checkbox" id="check">');
  }

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.