javascript adicionando ouvinte de evento de clique a class

Eu tenho um listview para excluir id. Eu gostaria de adicionar um ouvinte a todos os elementos com uma determinada class e fazer um alerta de confirmação.

Meu problema é que isso parece apenas adicionar o ouvinte à primeira class que encontrar. Eu tentei usar o querySelectorAll, mas não funcionou

 var deleteLink = document.querySelector('.delete'); deleteLink.addEventListener('click', function(event) { event.preventDefault(); var choice = confirm("sure u want to delete?"); if (choice) { return true; } });  

Lista:

 fetch_object()) { echo '
  • id.'">'.$obj->id.'' . '
  • '."\n"; } /* free result set */ $result->close(); $mysqli->close(); ?>

    Você deve usar querySelectorAll . Ele retorna NodeList, no entanto querySelector retorna apenas o primeiro elemento encontrado:

     var deleteLink = document.querySelectorAll('.delete'); 

    Então você faria um loop:

     for (var i = 0; i < deleteLink.length; i++) { deleteLink[i].addEventListener('click', function(event) { if (!confirm("sure u want to delete " + this.title)) { event.preventDefault(); } }); } 

    Além disso, você deve evitar o Default somente se confirm === false .

    Também é importante notar que return false/true é útil apenas para manipuladores de events ligados com onclick = function() {...} . Para addEventListening você deve usar event.preventDefault() .

    Demonstração: http://jsfiddle.net/Rc7jL/3/


    Versão ES6

    Você pode torná-lo um pouco mais limpo (e mais seguro em closures ) usando Array.prototype.forCada iteração em vez de for-loop:

     var deleteLinks = document.querySelectorAll('.delete'); Array.from(deleteLinks).forEach(link => { link.addEventListener('click', function(event) { if (!confirm(`sure u want to delete ${this.title}`)) { event.preventDefault(); } }); }); 

    O exemplo acima usa Array.from e strings de modelo do padrão ES2015.

    O problema com o uso de querySelectorAll e loop for é que ele cria um novo manipulador de events para cada elemento na matriz.

    Às vezes é exatamente isso que você quer. Mas se você tiver muitos elementos, pode ser mais eficiente criar um único manipulador de events e anexá-lo a um elemento de contêiner. Você pode então usar event.target para se referir ao elemento específico que acionou o evento:

     document.body.addEventListener("click", function (event) { if (event.target.classList.contains("delete")) { var title = event.target.getAttribute("title"); if (!confirm("sure u want to delete " + title)) { event.preventDefault(); } } }); 

    Neste exemplo, criamos apenas um manipulador de events que é anexado ao elemento body . Sempre que um elemento dentro do body é clicado, o evento click sobe para nosso manipulador de events.

    Uma solução curta e doce, usando o ES6:

     document.querySelectorAll('.input') .forEach(input => input.addEventListener('focus', this.onInputFocus)); 

    Você precisa usar o querySelectorAll já que você precisa selecionar todos os elementos com a dita class, novamente, já que o querySelectorAll é um array que você precisa para iterar e adicionar os manipuladores de events.

     var deleteLinks = document.querySelectorAll('.delete'); for (var i = 0; i < deleteLinks.length; i++) { deleteLinks[i].addEventListener('click', function (event) { event.preventDefault(); var choice = confirm("sure u want to delete?"); if (choice) { return true; } }); }