Problems with jquery click

Navigation
0

I have the following code: 

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $.getJSON('livros.json', function(data) {
    $.each(data, function(i, item) {
      console.log(item.name);
      $("#lista").append("<li><a class='livro'>" + item.name + "</a></li>");
    });
  });

</script>
<script type="text/javascript" src="js/script.js"></script>  
<body>
  <div id="wrapper">
    <ul id="lista">

    </ul>
  </div>
</body>

The above code is listing my json and settling with append in html, until everything is working, but now I want to get the click action on each a tag in the html. and I'm not getting it.

Click script that is not working: 

$(document).on('click', '.livro', function() {
  console.log("foi");
});
    
asked by anonymous 04.07.2018 / 19:02

4 answers

1

An alternative is to create a function for this and to "draw" the element on the screen with this function, your code would look something like this: 

<script type="text/javascript">
  $.getJSON('https://jsonplaceholder.typicode.com/users', function(data) {
    $.each(data, function(i, item) {
      console.log(item.name);
      $("#lista").append("<li><a href='#' onclick='minhaFuncao()'>" + item.name + "</a></li>");
    });
  });

  function minhaFuncao() {
    $("#mensagem").html("Deu certo")
  }

</script>
<script type="text/javascript" src="js/script.js"></script>

<body>
  <div id="wrapper">
    <ul id="lista">

    </ul>
  </div>
  <div id="mensagem">

  </div>
</body>
    
04.07.2018 / 20:23
0

Your code is working perfectly ... Try to check if there are no other handler's for the livro class, or check that there is no preventDefault() on the click 

let dataMock = [ { name: "Harry Potter e as Reliquias da Morte" }, { name: "Fundação Parte II" } ];
$.each(dataMock, function(i, item) {
    console.log(item.name);
    $("#lista").append("<li><a class='livro'>" + item.name + "</a></li>");
});


$(document).on('click', '.livro', function(){
    console.log("foi");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="wrapper">
  <ul id="lista">

  </ul>
</div>
    
04.07.2018 / 19:35
0

full code. I could not put it in jsfiddle because I could not put my json file 

<!DOCTYPE html>
<html lang="pt">
<head>
    <title>json read</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $.getJSON('livros.json', function(data) {
            $.each(data, function(i, item) {
                console.log(item.name);
                $("#lista").append("<li><a id='livro'>"+item.name+"</a></li>");
            });
        });

        $(document).on('click', '.livro', function(){
            console.log("foi");
        })

    </script>
</head>
<body>
    <div id="wrapper">
        <ul id="lista">

        </ul>        
    </div>
</body>
</html>

json file, it is not the complete file because it is too large I just took a part of it 

[
    {
        "abbrev": "hob", 
        "chapters": [
            [
                "capitulo 1."
            ],
            [
                "capitulo 2."
            ] 
        ],
        "name": "hoobit"
    },

    {
        "abbrev": "hp",
        "chapters": [
        [
            "capitulo 1."
        ],
        [
            "capitulo 2." 
        ]
    ],
        "name": "harry potter"
    } 
]
    
04.07.2018 / 20:14
0

Here in the example I did it worked:

  

Just change your $ (document) .on ('click', '.livro', function () ', function () 

var livros = [
    {
        "abbrev": "hob", 
        "chapters": [
            [
                "capitulo 1."
            ],
            [
                "capitulo 2."
            ] 
        ],
        "name": "hoobit"
    },

    {
        "abbrev": "hp",
        "chapters": [
        [
            "capitulo 1."
        ],
        [
            "capitulo 2." 
        ]
    ],
        "name": "harry potter"
    } 
]  
  
  
$.each(livros, function(i, item) {
  $("#lista").append("<li><a class='livro'>"+item.name+"</a></li>");
});

$(".livro").on("click", function() {  // pega o click do <a class="livro">
  console.log("funcionou");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="wrapper">
  <ul id="lista">
  
  </ul>        
</div>
    
04.07.2018 / 20:27
Block download in an audio streaming How to validate an email in c