Problems with click jquery

Asked

Viewed 102 times

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 code above I am listing my json and setando with the append in html, so far everything is working, only now I want to catch the click action on each tag a of html. and I’m not getting it.

click script that is not working:

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

  • Try the following code, jQuery(document.body).on('click', '.livro', function (event) {&#xA; console.log("foi");&#xA;}); If it works, I’ll explain it and add it to the answer.

  • that didn’t work either

  • Look at this https://jsfiddle.net/3a6p28u5/14/

  • @Barbetta this way worked, thanks had not thought of this solution.

  • I’ll play on the answer.

  • 1

    Possible duplicate of I can’t get the value of a child element

Show 1 more comment

4 answers

1


An alternative is to create a function for this and already "draw" the element on the screen with this function, your code would look 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>

  • a doubt came to me if after I want to get the name of the element that the person clicked I will be able to pass parameter by onclick even though he is inside an append?

  • Of course, if it is just the name you can pass as parameter, I updated the Fiddle with an example https://jsfiddle.net/3a6p28u5/17/, if there are more items, we can pass the whole element in the parameter

  • right only it seems to me that it is with quote problems, in javascript I could not do that scheme of putting the "" to break the quotes is possible to do this?

  • Strange.. It was supposed to work normal, let me see another alternative here.. , try so: minhaFuncao(\""+item.name+"\")

  • 1

    I gave right thanks, sorry for the questions I’m novice in javascript

  • Imagine, we’re there for it ;)

Show 1 more comment

0

Your code is working perfectly... Try to check if there are no others Handler’s for the class livro, or check if there is no preventDefault() at 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>
<div id="wrapper">
  <ul id="lista">

  </ul>
</div>

  • I did not find anything different in my code, but apparently it was supposed to work and I can not understand why it does not return me the click

  • So put your entire code into a Jsfiddle and share the link, so we can analyze it better :)

  • put my full code.

0

full code. I couldn’t put it in jsfiddle because I couldn’t 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 as it is very large caught only a part of it

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

    {
        "abbrev": "hp",
        "chapters": [
        [
            "capitulo 1."
        ],
        [
            "capitulo 2." 
        ]
    ],
        "name": "harry potter"
    } 
]

0

Here in the example I made it worked:

Just change your code $(Document). on('click', '.book', Function() for $(".book"). on('click', 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>

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

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.