Navigation en AJAX avec Jquery et Php

Par Ouedraogo Mahomed, il y a 7 ans

PHP Laravel

Bonjour,

Voila je rencontre un probleme javascript depuis une journée,
je veux pouvoir ecouter le clic sur un element d'une liste <li>
J'ai plein de liste dans mon code, et je veux ecouter les clic sur une liste donnée:
le bloc de liste qui me concerne est:
<div id="tableauListePatternTrou"> <div class="list-group"> <ul id="liste-trou-pattern"> <li id="1"><a href="#Z52B6_354-344_112" class="list-group-item">Z52B6_354-344_112</a></li> <li id="2"><a href="#SW_234-228_301" class="list-group-item">SW_234-228_301</a></li> <li id="3"><a href="#SW_234-228_302" class="list-group-item">SW_234-228_302</a></li> <li id="4"><a href="#SW_234-228_303" class="list-group-item">SW_234-228_303</a></li> <li id="5"><a href="#SW2_234-228_501" class="list-group-item">SW2_234-228_501</a></li> <li id="6"><a href="#SW3_324-318_102" class="list-group-item">SW3_324-318_102</a></li> <li id="7"><a href="#SW3_328-320_103" class="list-group-item">SW3_328-320_103</a></li> </ul> </div> </div>
Dans mes rechercher, il suffit juste que je fasse:
$(".list-group li").click(function(){ console.log('salu'); return false; });
quelqu'un pourrais me souffler une idée svp.

4 réponses

Ouedraogo Mahomed, il y a 7 ans

J'ai essayer aussi de deplacer mon script dans mon fichier app de LARAVEL comme ci-dessous:

<title>{{ config('app.name', 'QAQC') }}</title> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/liste_deroule_css.css') }}" rel="stylesheet"> <link href="{{ asset('css/panel_tab_ccibf_css.css') }}" rel="stylesheet"> <script src="{{ asset('googleapis/code.jquery.com/jquery-1.11.1.min.js') }}"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(".list-group li").click(function() { console.log('salu'); }); </script>

quand je clic sur les items liste, ca ne marche pas non plus.

Yoann Tronique, il y a 7 ans

Salut,

Il faut que ton javascript soit lu au chargement de la page qui contient ta liste.

L'a tu mis dans le vue en question ?

Pominus, il y a 7 ans

Ton sélecteur n'est pas complet si tu veut être tranquille utilise l'ID de ton UL comme ceci

$(".list-group ul#liste-trou-pattern li").click(function() { console.log('salut'); });
SNOWWTARIE, il y a 7 ans

Essaye de rajouter

$(document).ready(function () { $('#liste-trou-pattern li').on('click', function () { console.log('salut'); }); });

Histoire d'être sûr que ton jQuery soit bien chargé.

Soit dit en passant, tu charges un jquery 1.11 et un jquery 3.2 dans ton code, ça risque de créer des problèmes.

Sachant que ce code pourrait s'écrire en JS natif, histoire de grapiller quelques ms au chargement de la page :)

document.querySelectorAll('#liste-trou-pattern li').forEach( item => { item.addEventListener('click', event => { event.preventDefault(); console.log('salut'); }); });