contentEditable оно не функционирует

Я стараюсь превращать параграфы в элементы editables, но по какому-то странному разуму в момент создания новых параграфов он не позволяет мне издавать их. Параграфы заканчивают тем, что являются текстом, который он говорит "я получаю титул editable".

$(document).ready(function () {

    $(document).on('click', '.titulo_hijo', function(){
        let titulo_hijo = $(this).next();
        titulo_hijo.slideToggle();
    });

    $(document).on('click', '.eliminar', function(){
        let eliminar = $(this).parent().parent().parent();
        eliminar.remove();
    });

    $(document).on('click', '.editar', function(e){
        let editar = $(this).parent().prev();
        editar.attr("contentEditable","true");
        editar.focus();
        e.stopPropagation();
    });

    $(document).on('click', 'p', function(e){
        e.stopPropagation();
    });

    $('#btn-crear').on('click', function(){
        $('.contenedor').append(
            '<div class="contenedor_item">'+
                '<div class="titulo_hijo"><p class="parrafo">Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>'+
                '<div class="hijo">'+
                    '<div class="nieto"><p class="parrafo">Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>'+
                    '<div class="nieto"><p class="parrafo">Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>'+
                    '<div class="nieto"><p class="parrafo">Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>'+
                '</div>'+
            '</div>'
        );

        $('.nieto').after(
            '<div class="contenedor1">'+
            '<div class="puntaje">'+
                '<div class="puntaje-hijo puntaje-descripcion">PUNTAJE</div>'+
                '<div class="puntaje-hijo puntaje-puntuacion">1</div>'+
                '<div class="puntaje-hijo puntaje-puntuacion">2</div>'+
                '<div class="puntaje-hijo puntaje-puntuacion">3</div>'+
                '<div class="puntaje-hijo puntaje-puntuacion">4</div>'+
            '</div>'+
            '<div class="observacion">'+
                '<div class="observacion-hijo observacion-descripcionInicial">OBSERVACIONES</div>'+
                '<div class="observacion-hijo observacion-puntuacion">IMPORTANCIA</div>'+
                '<div class="observacion-hijo observacion-puntuacion observacion-malo">MALO</div>'+
                '<div class="observacion-hijo observacion-puntuacion observacion-regular">REGULAR</div>'+
                '<div class="observacion-hijo observacion-puntuacion observacion-bueno">BUENO</div>'+
                '<div class="observacion-hijo observacion-puntuacion observacion-muyBueno">MUY BUENO</div>'+
                '<div class="observacion-hijo observacion-descripcionFinal">OBSERVACIONES</div>'+
                '<div class="observacion-hijo observacion-i">i</div>'+
            '</div>'+
            '<div class="pregunta">'+
                '<div class="pregunta-contenedor">'+
                    '<div class="pregunta-hijo pregunta-preguntaInicial">AQUI PUEDE COLOCAR SU PREGUNTA</div>'+
                    '<div class="pregunta-hijo pregunta-comboBox">'+
                        '<select class="comboBox">'+
                                '<option value="Vacio" selected>--Seleccione--</option>'+
                                '<option value="Alta">Alta</option>'+
                                '<option value="Media">Media</option>'+
                                '<option value="Baja">Baja</option>'+
                        '</select>'+
                    '</div>'+
                    '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio"></div>'+
                    '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio"></div>'+
                    '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio"></div>'+
                    '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio"></div>'+
                    '<div class="pregunta-hijo pregunta-text"><input class="text" type="text"></div>'+
                    '<div class="pregunta-hijo pregunta-subirArchivo"><input class="subirArchivo" type="submit" value="i"></div>'+
                '</div>'+
            '</div>'+
        '</div>'
        );
    });

    $('.nieto').after(
        '<div class="contenedor1">'+
        '<div class="puntaje">'+
            '<div class="puntaje-hijo puntaje-descripcion">PUNTAJE</div>'+
            '<div class="puntaje-hijo puntaje-puntuacion">1</div>'+
            '<div class="puntaje-hijo puntaje-puntuacion">2</div>'+
            '<div class="puntaje-hijo puntaje-puntuacion">3</div>'+
            '<div class="puntaje-hijo puntaje-puntuacion">4</div>'+
        '</div>'+
        '<div class="observacion">'+
            '<div class="observacion-hijo observacion-descripcionInicial">OBSERVACIONES</div>'+
            '<div class="observacion-hijo observacion-puntuacion">IMPORTANCIA</div>'+
            '<div class="observacion-hijo observacion-puntuacion observacion-malo">MALO</div>'+
            '<div class="observacion-hijo observacion-puntuacion observacion-regular">REGULAR</div>'+
            '<div class="observacion-hijo observacion-puntuacion observacion-bueno">BUENO</div>'+
            '<div class="observacion-hijo observacion-puntuacion observacion-muyBueno">MUY BUENO</div>'+
            '<div class="observacion-hijo observacion-descripcionFinal">OBSERVACIONES</div>'+
            '<div class="observacion-hijo observacion-i">i</div>'+
        '</div>'+
        '<div class="pregunta">'+
            '<div class="pregunta-contenedor">'+
                '<div class="pregunta-hijo pregunta-preguntaInicial">AQUI PUEDE COLOCAR SU PREGUNTA</div>'+
                '<div class="pregunta-hijo pregunta-comboBox">'+
                    '<select class="comboBox">'+
                            '<option value="Vacio" selected>--Seleccione--</option>'+
                            '<option value="Alta">Alta</option>'+
                            '<option value="Media">Media</option>'+
                            '<option value="Baja">Baja</option>'+
                    '</select>'+
                '</div>'+
                '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio"></div>'+
                '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio"></div>'+
                '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio"></div>'+
                '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio"></div>'+
                '<div class="pregunta-hijo pregunta-text"><input class="text" type="text"></div>'+
                '<div class="pregunta-hijo pregunta-subirArchivo"><input class="subirArchivo" type="submit" value="i"></div>'+
            '</div>'+
        '</div>'+
    '</div>'
    );

    $(document).on('click', '.nieto', function(){
        let nieto = $(this).next();
        nieto.slideToggle();
    });

    //==========================AQUÍ ES DONDE LE DIGO QUE SE EDITE===============================

    $(document).on('click', '.parrafo', function(){
        $(this).attr("contentEditable", "true");
    });



});
input[type="submit"]{
    margin: 15px;
    cursor: pointer;
}

.contenedor1{
    display: none;
}

/*ESTILOS DEL PRIMER Y SEGUNDO NIVEL*/

body{
    padding: 0;
    margin: 0;
}

*{
    box-sizing: border-box;
}

.contenedor_item{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-top: 10px;
}

.titulo_hijo{
    width: 95%;
    height: 50px;
}

.titulo_hijo{
    background: tomato;
    margin-bottom: 10px;
}

.hijo{
    margin-bottom: 10px;
    width: 95%;
    display: none;
}

.titulo_hijo, .nieto{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    padding: 0 15px;
    box-shadow: 0 2px 5px #757575;
}

.nieto{
    background: wheat;
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
}

.iconos{
    display: flex;
    justify-content: center;
    align-items: center;
}

.eliminar{
    margin-left: 10px;
}

/*ESTILOS DEL 3ER NIVEL*/

/*CONTENEDOR*/
.contenedor1 {
    width: 95%;
    margin: 0 auto;
  }
  
  /*PUNTAJE*/
  .puntaje {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: white;
    height: 30px;
    background: #3c8dbc;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
  
  .puntaje-hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }
  
  .puntaje-descripcion {
    width: 41%;
  }
  
  .puntaje-puntuacion {
    width: 8%;
  }
  
  /*OBSERVACIONES*/
  .observacion {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: #333;
    height: 30px;
    background: #ecf0f5;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 5px;
  }
  
  .observacion-hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }
  
  .observacion-descripcionInicial {
    width: 33%;
  }
  
  .observacion-puntuacion {
    width: 8%;
  }
  
  .observacion-descripcionFinal {
    width: 16%;
  }
  
  .observacion-i {
    width: 8%;
  }
  
  .observacion-malo {
    background-color: #fb86af;
  }
  
  .observacion-regular {
    background: #fbd386;
  }
  
  .observacion-bueno {
    background: #cdf69d;
  }
  
  .observacion-muyBueno {
    background: #cdf69d;
  }
  
  /*PREGUNTA*/
  .pregunta {
    /* font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: #333;
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center; */
    width: 100%;
  }
  
  .pregunta-contenedor{
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: #333;
    height: 49px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
  
  .pregunta-hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 49px;
  }
  
  .pregunta-preguntaInicial{
      width: 33%;
      justify-content: flex-start;
      padding: 0 15px;
  }
  
  .pregunta-comboBox{
      width: 8%;
  }
  
  .pregunta-radioButton{
      width: 8%;
  }
  
  .pregunta-text{
      width: 16%;
  }
  
  /*---*/
  
  .text{
      padding: 6px 12px;
      height: 35px;
      width: 240px;
      border: 1px solid #d2d6de;
    
  }
  
  /*---*/
  
  .pregunta-subirArchivo{
      width: 8%;
  }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Pregunta</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="index5.js"></script>
    <link rel="stylesheet" href="index5.css">

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">

</head>
<body>
    <input id="btn-crear" type="submit" value="Añadir elemento nuevo">
    <div class="contenedor">
        <div class="contenedor_item">
            <div class="titulo_hijo">
                <p class="parrafo">Titulo editable</p>
                <div class="iconos">
                    <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                    <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                </div>
            </div>
            <div class="hijo">
                <div class="nieto">
                    <p class="parrafo">Titulo editable</p>
                    <div class="iconos">
                        <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                        <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                    </div>
                </div>
                <div class="nieto">
                    <p class="parrafo">Titulo editable</p>
                    <div class="iconos">
                        <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                        <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                    </div>
                </div>
                <div class="nieto">
                    <p class="parrafo">Titulo editable</p>
                    <div class="iconos">
                        <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                        <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="contenedor_item">
            <div class="titulo_hijo">
                <p class="parrafo">Titulo editable</p>
                <div class="iconos">
                    <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                    <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                </div>
            </div>
            <div class="hijo">
                <div class="nieto">
                    <p class="parrafo">Titulo editable</p>
                    <div class="iconos">
                        <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                        <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                    </div>
                </div>
                <div class="nieto">
                    <p class="parrafo">Titulo editable</p>
                    <div class="iconos">
                        <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                        <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                    </div>
                </div>
                <div class="nieto">
                    <p class="parrafo">Titulo editable</p>
                    <div class="iconos">
                        <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                        <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                    </div>
                </div>
            </div>
        </div>

        <div class="contenedor_item">
            <div class="titulo_hijo">
                <p class="parrafo">Titulo editable</p>
                <div class="iconos">
                    <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                    <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                </div>
            </div>
            <div class="hijo">
                <div class="nieto">
                    <p class="parrafo">Titulo editable</p>
                    <div class="iconos">
                        <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                        <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                    </div>
                </div>
                <div class="nieto">
                    <p class="parrafo">Titulo editable</p>
                    <div class="iconos">
                        <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                        <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                    </div>
                </div>
                <div class="nieto">
                    <p class="parrafo">Titulo editable</p>
                    <div class="iconos">
                        <img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar">
                        <img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
0
задан 28.03.2019, 08:49
1 ответ

Одинокая проблема была añadir признак class = "параграф" в мои этикетки

, сейчас уже функционируй!!! :)

0
ответ дан 19.11.2019, 21:21

Теги

Похожие вопросы