Jquery 切换事件在加载表后不起作用

Question

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]);
}

Answer 1

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]);
}