After reloading, the jQuery system does not work

Question

After reloading, the jQuery system does not work

Asked 4 years, 1 month ago

Viewed 57 times

1

When I click a button .click, my JS runs a function and updates the fields with the class .click. But why when HTML is updated and clicked on .click again nothing happens as if the class does not exist?

Javascript:

$(function () {
    $(".click").click(function () {
        $.get("http://localhost/test/api.php", function (data) {
            alert(data);
            $(".content").html(data);
        })
    })
})

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div class="content">
    <div class="click">ops</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="functions.js"></script>
</body>
</html>

When I first click on .click, search for the HTML of api.php (<div class="click">eita</div>), which is placed in .content.

But if I click again on .click after reloading, content with AJAX’s HTML simply does nothing else. Why?

What is the HTML of the page http://localhost/test/api.php? Edit the question to include it.

– Luiz Felipe

2020/10/29 at 17:14
code <div class="click">Eita</div>

– Gilberto Gonçalves

2020/10/29 at 17:17

1 answer

Browser other questions tagged javascript jquery

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

by Luiz Felipe • **32,886** points · Answer 1 · 2020-10-29T17:33:13+00:00

The problem is that you are attaching the Listener of event in the <div class="click">ops</div>, that will be removed from the page when you use the method html. Thus, your Listener event will also be lost.

You must make use of the mechanism of event delegation to resolve this. Attach the Listener in .content, that is not removed from the page:

See an example (no AJAX, but illustrates well):

$('.content').on('click', '.click', function() {
  console.log($(this).text());
  
  $('.content').html('<div class="click">Segundo</div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">
  <div class="click">Primeiro</div>
</div>

Note, that the Listener was attached in .content, but will be delegated to the selector elements .click (second argument of the method on).