Elementos de un array añadidos dinámicamente никакой funcionan вносит ООН evento

Tengo ООН вводят довод "против" que al rellenarlo y enviarlo crea una nueva línea en una lista una clase. En la función creo la línea, su texto, Лос asocio, le defino la clase.

Luego quiero que exista un evento en el que, al pasar por encima de cualquiera de las líneas definidas подставляет una clase, se borren.

Añado un contador para poner un límite al bucle for y así, desde dentro, poder crear una variable локальные жабы que contenga las классы y se определяют cada vez que sucede el evento. Pero... Никакой reconoce las clases nuevas! ¿Qué está ocurriendo?

var lista = document.getElementById('lista');
var texto = document.getElementsByTagName('input')[0];
var boton = document.getElementById('boton');
var contador = 3;

function agregar() {
  let item = texto.value;
  let newL = document.createElement('li');
  newL.classList.add('linea');
  let newT = document.createTextNode(item);
  lista.appendChild(newL);
  newL.appendChild(newT);
  contador++;
}


for (let i = 0; i < contador; i++) {
  let clases = document.getElementsByClassName('linea');
  clases[i].addEventListener('mouseover', function() {
    this.style.display = 'none';
    contador--;
  })
}

boton.onclick = agregar;
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <form action="">
    <input type="text">
    <button id="boton" type="button">
      agregar
    </button>
  </form>

  <div id="bloque" style="width: 20%;">
    <ul id="lista">
      <li class="linea">Tomates</li>
      <li class="linea">Habichuelas</li>
      <li class="linea">Arroz</li>
    </ul>
  </div>
</body>

</html>

Комо siempre, muchas gracias

7
задан 04.11.2019, 13:52
3 ответа

Хотя каждый раз, когда ты создаешь элемент (или же он dinГЎmico) ты должен добавлять в событие (с addEventListener ), это способствует тому, чтобы ты был должен повторять код. Рекомендация

  • ВЫБОР 1: Герметизировать в корпусе в одном mГ©todo добавления в событие (чтобы не повторять cГіdigo)
  • ВЫБОР 2: (recomendaciГіn) реализовывать еще одно событие производит, чтобы обнаруживать элементы dinГЎmicos (состоит в том, чтобы добавлять событие к более общему элементу сам документ или список)

Для нее opciГіn 2, вызов" delegaciГіn события ", для того, чтобы тот же самый "пузырился" во всей ветви элемента. AquГ - пример, который вооружал бы на основании тебя cГіdigo

такая общая серьезная часть

document.addEventListener('mouseover',function(e){        
      if(e.target && e.target.className == 'linea'){
          e.target.style.display = 'none';
        }
    });

Как края, добавляет в document , но он мог бы быть в элемент отцом занеси в список

lista.addEventListener('mouseover',function(e){        
      if(e.target && e.target.className == 'linea'){
          e.target.style.display = 'none';
        }
    });

Я оставляю cГіdigo завершаю

var lista = document.getElementById('lista');
var texto = document.getElementsByTagName('input')[0];
var boton = document.getElementById('boton');

function agregar() {
  let item = texto.value;
  let newL = document.createElement('li');
  newL.classList.add('linea');

  let newT = document.createTextNode(item);
  lista.appendChild(newL);
  newL.appendChild(newT);
}


lista.addEventListener('mouseover',function(e){        
  if(e.target && e.target.className == 'linea'){
    e.target.style.display = 'none';
  }
});

boton.onclick = agregar;
    <form action="">
        <input type="text">
        <button id="boton" type="button">
            agregar
        </button>
    </form>

    <div id="bloque" style="width: 20%;">
        <ul id="lista">
            <li class="linea">Tomates</li>
            <li class="linea">Habichuelas</li>
            <li class="linea">Arroz</li>
        </ul>
    </div>

Надеюсь, что он служит тебе помощью или guГ - в.

10
ответ дан 01.12.2019, 14:41

Проблема коренится в факте, который for, которые он пробегает элементы с классом linea выполняет единственный раз (загрузив страницу), когда aГ±ades новые линии ты не распределяешь им событие mouseover, и цикл уже работал.

ты Можешь распределять событие, когда ты будешь верить в новую линию:

newL.addEventListener('mouseover', () => { newL.style.display = 'none' });

твой код остался бы таким:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <form action="">
        <input type="text">
        <button id="boton" type="button">
            agregar
        </button>
    </form>

    <div id="bloque" style="width: 20%;">
        <ul id="lista">
            <li class="linea">Tomates</li>
            <li class="linea">Habichuelas</li>
            <li class="linea">Arroz</li>
        </ul>
    </div>

    <script>
        var lista = document.getElementById('lista');
        var texto = document.getElementsByTagName('input')[0];
        var boton = document.getElementById('boton');

        function agregar() {
            let item = texto.value;
            let newL = document.createElement('li');
            newL.classList.add('linea');
            newL.addEventListener('mouseover', () => { 
              setInterval(function(arg){ 
                newL.style.display = 'none';
              }, 1000);});
            let newT = document.createTextNode(item);
            lista.appendChild(newL);
            newL.appendChild(newT);
        }


        let clases = document.getElementsByClassName('linea');
        for (let i = 0; i < clases.length; i++) {
            clases[i].addEventListener('mouseover', () => { 
              setInterval(function(arg){ 
                clases[i].style.display = 'none' ;
              }, 1000);});
        }
        function mouseOver(arg) {
            setInterval(function(arg){ 
              arg.style.display = 'none'; 
            }, 1000);
            
        }
        boton.onclick = agregar;
    </script>
</body>

</html>

В этом случае не был бы надо использование счетчика.

3
ответ дан 01.12.2019, 14:41
  • 1
    С этим примером, сделав hover, от себя скрывают все они " li". – Camilo Bernal 07.11.2019, 23:40
  • 2
    В действительности он не así Камило, я поместил интервалы 1s для того, чтобы был виден самый медленный эффект, и подкреплять, что скрываются индивидуально. Привет – neollob 10.11.2019, 21:44

У новых элементов, которые ты добавляешь, нет события распределенных mouseover. Это могут быть распределенными в ней funciГіn agregar тому же самому создавать элемент. AquГ - у тебя есть твой пример функционируя и прокомментировано:

var lista = document.getElementById('lista');
var texto = document.getElementsByTagName('input')[0];
var boton = document.getElementById('boton').onclick = agregar;;

// Solo se ejecuta en la primera carga, por lo que los únicos afectados serán los elementos ya existentes de inicio pero los nuevos no.
for (let i = 0; i < lista.childElementCount; i++) {
let clases = document.getElementsByClassName('linea');
    asignarEvento(clases[i]);
}

// Asignamos el evento "mouseover" en el elemento agregado.
function agregar() {
    let newL = document.createElement('li');
    newL.classList.add('linea');
    let newT = document.createTextNode(texto.value);
    lista.appendChild(newL);
    newL.appendChild(newT);
    asignarEvento(newL);
}

// Creamos una función encargada de asignar el evento a un elemento para no repetir código, ya que es llamado en 2 ocasiones: en la primera carga y trás cada elemento agregado.
function asignarEvento(elemento) {
    elemento.addEventListener('mouseover', function() {
        this.style.display = 'none';
    })
}

, Поскольку ты можешь видеть уже, не существует также переменная ВґcontadorВґ, так как не было необходимо работать с нею, так как знать nГєmero элементов только необходимо в первом грузе.

Надеялся смочься помогать тебе.

0
ответ дан 01.12.2019, 14:41

Теги

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