Jquery event of toggle doesn't works after load table

I am developing with Symfony.
On my page I have a data table with a toggle for each row. After submitting a form to modify a row of this table, I load the table. However after loading the table (not the whole page), my toggle’s jQuery event no longer works.
My page is separated in 2 view. One for the page and one for the table on the page.

Javascript :

$(document).ready(
function() {

    // load the table
    $(document).on("click", ".btn-load", function() {

        $('.table').load('/table');

    });


    $("input[type='checkbox']").on('change', function(){
        console.log("Hello I have changed !");
    });

    //toggle 
    $(document).on("change", "input", function() {
        console.log($(this).val());
        let id = $(this).val();
        let isCheck;
        if ($(this).is(":checked") === true) {
            isCheck = 1;
        } else isCheck = 0;

        let url = "/follow";
        let data = {'id': id, 'valeur': isCheck};

        $.ajax({
            type: "POST",
            url: url,
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: 'html',
            cache: false
        });

    });


});

Page template :

{% block body %}

  <br>
  <h1><center>Affichage des players</center></h1>

  {% if app.user %}
    <li><a href="/logout">Déconnexion</a></li>
  {% else %}
    <li><a href="/login">Connexion</a></li>
  {% endif %}

  <a
    class="btn-new dt-button buttons-collection buttons-colvis btn btn-white btn-primary btn-bold"
    data-toggle="modal"
    data-target="#dataModal"
    href="#"
  >
    Nouveau Player
  </a>

  <section class="wrapper">
    <div class="row mt">
      <div class="col-md-12">
        <div class="content-panel">

              {% block table %}{% include "manager_temp/table.html.twig" %}{% endblock table %}
        </div>
      </div>
    </div>
  </section>

{% endblock %}

table template :

{% block table %}


        <table class="table table-striped table-advance table-hover">
            <h4><i class="fa fa-angle-right"></i> Players</h4>
            <thead>
            <tr>
              <th><i class="fa fa-home"></i> Host</th>
              <th class="hidden-phone"><i class="fa fa-desktop"></i> Dest</th>
              <th><i class=" fa fa-arrows-h"></i> Largeur</th>
              <th><i class=" fa fa-arrows-v"></i> Hauteur</th>
              <th><i class=" fa fa-check-circle"></i> Suivi</th>
              <th><i class=" fa fa-key"></i> ID Xibo</th>
              <th><i class=" fa fa-info-circle"></i> Type</th>
              <th><i class=" fa fa-edit"></i> Actions</th>
              <th></th>
            </tr>
            </thead>

            {% for player in players %}
              <tr>
                  // ------- THIS IS THE TOGGLE ----------
                {% if player.isFollowed == 1 %}
                  <td>
                    <input class="check" id="che" type="checkbox" checked="" value="{{ player.idPlayer }}" data-toggle="switch"/>
                  </td>

                {% else %}
                  <td><input class="check" type="checkbox" value="{{ player.idPlayer }}" data-toggle="switch" /></td>
                {% endif %}

                <td>{{ player.playerType.type }} </td>

                <td>
                  <button class="btn-edit btn-primary btn-xs" value="{{ player.idPlayer }}"><i class="fa fa-pencil"></i></button>
                  <button class="btn-delete btn-danger btn-xs" value="{{ player.idPlayer }}"><i class="fa fa-trash-o"></i></button>
                </td>
              </tr>
            {% endfor %}

        </table>

{% endblock %}

{% block stylesheets %}
  <!-- tables style -->
  <!-- Bootstrap core CSS -->
  <link href="{{ asset('theme/lib/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
  <!--external css-->
  <link href="{{ asset('theme/lib/font-awesome/css/font-awesome.css') }}" rel="stylesheet" />
  <!-- Custom styles for this template -->
  <link href="{{ asset('theme/css/style.css') }}" rel="stylesheet">
  <link href="{{ asset('theme/css/style-responsive.css') }}" rel="stylesheet">

  <!-- toggle style -->
  <link href="{{ asset('theme/lib/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
  <!--external css-->
  <link href="{{ asset('theme/lib/font-awesome/css/font-awesome.css') }}" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="{{ asset('theme/lib/bootstrap-datepicker/css/datepicker.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ asset('lib/bootstrap-daterangepicker/daterangepicker.css') }}" />
  <!-- Custom styles for this template -->
  <link href="{{ asset('theme/css/style.css') }}" rel="stylesheet">
  <link href="{{ asset('theme/css/style-responsive.css') }}" rel="stylesheet">
{% endblock %}

{% block javascripts %}
  <script src="{{ asset('theme/lib/jquery/jquery.min.js') }}"></script>
  <script src="{{ asset('theme/lib/bootstrap/js/bootstrap.min.js') }}"></script>
  <script class="include" type="text/javascript" src="{{ asset('theme/lib/jquery.dcjqaccordion.2.7.js') }}"></script>
  <script src="{{ asset('theme/lib/jquery.scrollTo.min.js') }}"></script>
  <script src="{{ asset('theme/lib/jquery.nicescroll.js') }}" type="text/javascript"></script>
  <!--common script for all pages-->
  <script src="{{ asset('theme/lib/common-scripts.js') }}"></script>
  <!--script for this page-->
  <script src="{{ asset('theme/lib/jquery-ui-1.9.2.custom.min.js') }}"></script>
  <!--custom switch-->
  <script src="{{ asset('theme/lib/bootstrap-switch.js') }}"></script>
  <!--custom tagsinput-->
  <script src="{{ asset('theme/lib/jquery.tagsinput.js') }}"></script>
  <!--custom checkbox & radio-->
  <script type="text/javascript" src="{{ asset('theme/lib/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>
  <script type="text/javascript" src="{{ asset('theme/lib/bootstrap-daterangepicker/date.js') }}"></script>
  <script type="text/javascript" src="{{ asset('theme/lib/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
  <script type="text/javascript" src="{{ asset('theme/lib/bootstrap-inputmask/bootstrap-inputmask.min.js') }}"></script>
  <script src="{{ asset('theme/lib/form-component.js') }}"></script>

  <script src="{{ asset('javascript/player.js') }}"></script>
{% endblock %}

my controller :

/**
 * @Route ("/", name = "player")
 */
public function players(): Response
{
    $player = $this->getDoctrine()
        ->getRepository(Player::class)
        ->findAll();

    return $this->render('manager_temp/players.html.twig', ['players' => $player]);
}

/**
 * @Route ("/table", name = "table")
 */
public function playersTable(): Response
{
    $player = $this->getDoctrine()
        ->getRepository(Player::class)
        ->findAll();

    return $this->render('manager_temp/table.html.twig', ['players' => $player]);
}

73 thoughts on “Jquery event of toggle doesn't works after load table”

  1. you are truly a excellent webmaster. The website loading
    speed is incredible. It kind of feels that you’re doing any distinctive
    trick. Furthermore, The contents are masterpiece. you have performed a wonderful process on this topic!

    Reply
  2. This design is spectacular! You certainly know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Excellent job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

    Reply
  3. When someone writes an piece of writing he/she retains the plan of a user in his/her brain that how a user can understand it.
    Therefore that’s why this article is great. Thanks!

    Reply
  4. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to
    my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some
    time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading your
    blog and I look forward to your new updates.

    Reply
  5. First of all I want to say awesome blog!

    I had a quick question that I’d like to ask if you do
    not mind. I was interested to find out how you center yourself and clear your head before writing.
    I have had trouble clearing my thoughts in getting my ideas out there.
    I truly do take pleasure in writing but it just seems like the first 10
    to 15 minutes tend to be wasted just trying to figure out how to
    begin. Any suggestions or tips? Appreciate it!

    Reply