Galera, estou com problemas com a delegação de eventos para novas estruturas. Alguém pode me ajudar?
Solucionado
Galera, estou com problemas com a delegação de eventos para novas estruturas. Alguém pode me ajudar?
hoje, com a Alura e o Google Gemini
Oi Carlos, precisamos que vc explique qual é o problema.. Qual erro está acontecendo? E, se possível, comece colocando o trecho de código problemático dentro do próprio fórum.
Então Alberto, no link acima de um projetinho que eu estrava treinando (igual ao de um curso de Javascript aqui do Alura).
Oque ele faz? É praticamente um post-it digital, e cada post-it tem uma lista com a função de mudar de cor.
Problema: Ao adicionar um novo post-it a função mudar de cor não funciona.
Link: http://codepen.io/C4rL05R315/pen/ZOkppW
HTML:
<!DOCTYPE html>
<html lang="pt">
<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">
<link rel="stylesheet" href="estilo.css">
<title>My Cards</title>
</head>
<body>
<header>
<div class="container">
<a class="logo" href="">My Cards</a>
<ul class="header-ul">
<li class="header-ul-li"><a href="">Botão1</a></li>
<li class="header-ul-li"><a href="">Botão2</a></li>
</ul>
</div>
</header>
<div class="insert-text">
<textarea id="texto" name="texto" placeholder="Digite o conteúdo do seu card aqui."></textarea>
<input id="adicionar" type="button" name="name" value="Adicionar">
</div>
<div class="cards container">
<div class="card" data-cor="cor-quatro">
<ul class="cores">
<li class="cor cor-um">cor-um</li><!--
--><li class="cor cor-dois">cor-dois</li><!--
--><li class="cor cor-tres">cor-tres</li><!--
--><li class="cor cor-quatro">cor-quatro</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, dolorem sed placeat tenetur dolores nulla officia.</p>
</div>
</div>
<script src="jQuery_v3.1.min.js"></script>
<script src="adicionaCards.js"></script>
</body>
</html>JQUERY:
function mudaCorCard (){
var newColor = $(this).text();
var card = $(this).parents('.card');
card.attr('data-cor', newColor);
}
function novoCard(){
var novoTexto = $('#texto').val();
if(novoTexto == ''){
alert('O digite um conteúdo para o card.');
}else{
var novoCard = "<div class='card' data-cor='cor-um'>"+
"<ul class='cores'>"+
"<li class='cor cor-um'>cor-um</li>"+
"<li class='cor cor-dois'>cor-dois</li>"+
"<li class='cor cor-tres'>cor-tres</li>"+
"<li class='cor cor-quatro'>cor-quatro</li>"+
"</ul>"+
"<p>" + novoTexto + "</p>"+
"</div>"
$('.cards').append(novoCard);
$('#texto').val("");
/* Função para adicionar o comportamento de mudar de cor
nos novos cards.
$('.cor').click(mudaCorCard);
*/
}
}
$('#adicionar').click(novoCard);
//Tentando delegar a função "mudaCorCard" para os novos cards
$('.cores').on('click','.cor', mudaCorCard);CSS:
*{
border: none;
margin: 0;
padding: 0;
}
body{
font-family: sans-serif;
}
header{
background-color: #86a8da;
}
.container{
padding: 1em 0 1em 0;
margin: 0 auto 0 auto;
height: 100%;
width: 80%;
}
.header-ul{
list-style: none;
display: inline-block;
float: right;
}
.header-ul-li{
display: inline-block;
}
.logo{
background-color: #005980;
color: #fff;
font-weight: bold;
}
a{
background-color: #9c9c9c;
padding: .5em;
color: #fff;
text-decoration: none;
border-radius: .3em;
}
.insert-text{
background-color: #dfdfdf;
padding: 2em 0;
}
textarea{
padding: 1em;
width: 45%;
height: 1.5em;
transition: 1s;
font-size: 1em;
}
textarea, #adicionar{
margin-left: auto;
margin-right: auto;
display: block;
}
textarea:focus{
transition: 1s;
height: 9em;
box-shadow: 0 0 5px 1px #86A8DA;
}
#adicionar{
border-radius: .3em;
font-weight: bold;
color: #000;
margin-top: 1em;
font-family: sans-serif;
padding: .7em 1.5em;
background-color: #ccc;
}
#adicionar:hover,
#adicionar:focus{
transition: .4s;
color: #fff;
background-color: #9C9C9C;
}
.card{
padding: 1em;
width: 16%;
height: 10%;
position: relative;
margin: 2em 2em;
display: inline-block;
}
.card:hover .cores{
transition: .8s;
opacity: 1;
}
.cores{
list-style: none;
position: absolute;
top: -30px;
right: 0;
opacity: 0;
transition: .8s;
}
.cores li{
display: inline-block;
border: 3px solid rgba(0, 0, 0, 0.2);
width: 2em;
height: 2em;
border-radius: 50%;
text-indent: -9999px;
}
.cor-um,
[data-cor="cor-um"]{
background-color: yellow;
}
.cor-dois,
[data-cor="cor-dois"]{
background-color: orange;
}
.cor-tres,
[data-cor="cor-tres"]{
background-color: green;
}
.cor-quatro,
[data-cor="cor-quatro"]{
background-color: red
}
Oi Carlos, tudo certo?
Você comentou a parte que faz com que a função mudaCorCard seja acionada nos cartões novos.
No seu Codepen, ali na linha 26.
Espero ter ajudado,
Abcs!
Sim Natan! Essa era a forma que eu estava fazendo antes(que estava dando certo), porém, eu estou tentando entender, como fazer pelo método de delegação de eventos do jQuery, na linha 34.
Eu dei uma olhada na documentação mas ainda não ficou muito claro: https://learn.jquery.com/events/event-delegation/
Duas coisas:
No momento da criação dessa delegação de evento, não existe o elemento .cores. Só o primeiro, mas não os que você adiciona. Então, delegue para document encontrar .cor.
$(document).on('click', '.cor', function (){});
E na sua função mudaCorCard, você faz menção a this.
function mudaCorCard (){
var newColor = $(this).text();
var card = $(this).parents('.card');
card.attr('data-cor', newColor);
}this nesse caso é mudaCorCard, então sugiro que passe o campo por parâmetro. Fiz um fork no seu codepen. Espero que te ajude.
Abraços.
Show de bola Vinícios! Eu já estava quase igual ao Dustin de Stranger Things (banguela) de tanto apanhar. Vlw! Abraço.
Só pra finalizar...
Qual seria a melhor forma de fazer essa delegação:
Chamando a função "mudaCorCard" dentro da função "novoCard".
Ou utilizando a delegação de eventos nativa do jQuery.
Não sei se entendi a dúvida. Quer saber se atribui o evento dentro da função, quando criar um novo card, ou se faz utilizando a delegação de eventos? Eu acho mais organizado utilizando delegação de eventos, mas, fica a seu critério. Não há "forma certa".
;-)