Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
tenho o seguinte codigo
<head>
<script type="text/javascript">
$.ajax({
url: 'livros.json',
dataType: 'json',
type: 'get',
cache: false,
success: function(data){
$.each(data, function(i, item){
console.log(item.name);
$("#lista").append("<li><a id='livro'>"+item.name+"</a></li>");
});
}
});
</script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<ul id="lista">
</ul>
</div>
</body>
ate ai tudo bem ele me lista os dados que estão no json
ai queria pegar o click nos items listados ai estou usando esse codigo
$(document).ready(function(){
$('#livro').click(function(){
console.log("clicou");
});
})
só que ele não me retorna nada, se alguém puder me ajudar>
1 hora atrás, junior almeida disse:
$(document).ready(function(){ $('#livro').click(function(){ console.log("clicou"); }); })
Você tem que ter algum elemento html com o ID livro para funcionar.
No HTML que mostrou aí só tem os elementos ID **wrapper** e **lista**Ou dessa forma também resolve.
$("#lista").on("click", "#livro", function(){
let $a = $(this);
console.log($li.html());
})
Ali eu acessei o .html() do elemento clicado, mas você pode acessar ou modificar qualquer outro atributo do elemento.
Segue dois artigos sobre event delegate, um com jQuery e outro com JS puro.
[https://tableless.com.br/entendendo-o-event-delegation-jquery/](https://tableless.com.br/entendendo-o-event-delegation-jquery/)
[http://wbruno.com.br/javascript-puro/delegate-events-no-javascript/](http://wbruno.com.br/javascript-puro/delegate-events-no-javascript/)
No script que postei acima o correto é assim:
$("#lista").on("click", "#livro", function(){
let $a = $(this);
console.log($a.html());
})>
14 horas atrás, bross lightyear disse:
Acredito que o problema esteja no id ser repetido, tenta colocar classe .livro e utilize tipo.
$('.livro').click(function(){
console.log("clicou");
});
o id livro ele não se repete ate tentei colocar outro id mas mesmo assim não foi>
13 horas atrás, Wesley Santos disse:
Ou dessa forma também resolve.
$("#lista").on("click", "#livro", function(){
let $a = $(this);
console.log($li.html());
})
Ali eu acessei o .html() do elemento clicado, mas você pode acessar ou modificar qualquer outro atributo do elemento.
Segue dois artigos sobre event delegate, um com jQuery e outro com JS puro.
[https://tableless.com.br/entendendo-o-event-delegation-jquery/](https://tableless.com.br/entendendo-o-event-delegation-jquery/)
[http://wbruno.com.br/javascript-puro/delegate-events-no-javascript/](http://wbruno.com.br/javascript-puro/delegate-events-no-javascript/)
No script que postei acima o correto é assim:
$("#lista").on("click", "#livro", function(){
let $a = $(this);
console.log($a.html());
})
dessa maneira também não esta funcionando, dei uma lida nos artigos mas eles não me ajudaram a resolver o problema$("#lista").append("<li><a class='livro'>"+item.name+"</a></li>");
$('.livro').click(function(){
alert($(this).html());
});
tenta isso pra testar<ul>
<li><a class='livro'>teste</a></li>
<li><a class='livro'>testexxxx</a></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.livro').click(function(){
alert($(this).html());
});
})
</script>>
6 minutos atrás, bross lightyear disse:
<ul>
<li><a class='livro'>teste</a></li>
<li><a class='livro'>testexxxx</a></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.livro').click(function(){
alert($(this).html());
});
})
</script>
dessa maneira ele funciona só que o problema é que meus elementos são criados pelo jquery com o append ai não consigo pegar o click dos elementos criado dinamicamentebasta trocar seu append para isso
$("#lista").append("<li><a class='livro'>"+item.name+"</a></li>")
trocar o append
$("#lista").append("<li><a class='livro'>"+item.name+"</a></li>")
e trocar
<script type="text/javascript"> $(document).ready(function(){ $('.livro').click(function(){ alert($(this).html()); });})</script>
Acredito que o problema esteja no id ser repetido, tenta colocar classe .livro e utilize tipo.