Проблемы, чтобы добавлять элемент

Я только что создал анонимную функцию для того, чтобы он добавил больше аккордеонов, но не знаю, почему не хочется разворачивать. И также не хоти ни быть удаленным ни издать текст.

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

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

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

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

    $('#btn-crear').on('click', function(){
        $('.contenedor').append(
            '<div class="contenedor_item">'+
                '<div class="titulo_hijo"><p>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>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>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>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>'
        );
    });

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

/**/

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;
}
<!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>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>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>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>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>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>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>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>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>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>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>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>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
задан 20.03.2019, 22:14
1 ответ

Если ты хочешь aГ±adir события в будущие элементы с jQuery, ты должен показывать ему такой селектор как секунда parГЎmetro в ней funciГіn on.

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

Событие serГЎ aГ±adido в будущие элементы, у которых был бы класс titulo_hijo. И использовав $ (document), мы убеждаемся имения "отца", который всегда существует.

Здесь ты считаешь измененным твой код как deberГ, - чтобы оставаться.

1
ответ дан 02.12.2019, 05:21
  • 1
    Спасибо, точно он спрашивал это у него в @cignius. Он думал, что on. ('...') он был равен addEventListener. Но со вторым параметром, что понятный, что sí. – Gian Franco Alexis Poma Vidal 20.03.2019, 22:50
  • 2
    Искренне, были бы способы лучше делания вещей, но это происходит всегда. Например, он má s рекомендуемый, что ты веришь в контейнер используя узлы, что из-за string. Даже лучше серьезная иметь созданный узел и клонировать это, так как у тебя так может быть узел с событием и всем необходимым añ adido. Но изящество programació n дело в том, что каждый делает это различным! – Francisco Garrido 20.03.2019, 22:52
  • 3
    jejeje, если ты имеешь в виду, который я повторяю и повторяю có я говорю спокойно, sé что являются плохими практиками, и спасибо за упоминание о mé все клонировало (). :) – Gian Franco Alexis Poma Vidal 20.03.2019, 23:02