web-dev-qa-db-fra.com

Utilisation de jQuery pour "cliquer" sur un élément li

J'ai un élément <ul> qui génère dynamiquement les éléments <li> et je veux simplement exécuter un événement onclick

<ul id="results">
    <li class="device_result searchterm" data-url="Apple-iphone-5s">
        <a href="#"> Apple iPhone 5s </a>
    </li>
    <li class="device_result searchterm" data-url="Apple-iphone-5c">
        <a href="#"> Apple iPhone 5s </a>
    </li>
</ul>

J'ai le jQuery suivant dans un bloc $(document).ready mais cela ne semble pas fonctionner - des idées sur ce que je fais mal?

$("li .searchterm").click(function() {  
    console.log("testing");
});
javascriptjqueryhtmlonclickdocument-ready
12
Zabs

si vous ajoutez dinamically, cliquez sur la liste mais sélectionnez les éléments:

$("#results").on("click", ".searchterm", function(event){
    console.log('clicked');
});

essayez sur le violon: http://jsfiddle.net/emPKS/

16
Edorka

Supprimer l'espace dans le sélecteur

  $("li.searchterm").click(function() {    
   console.log('testing');
});

et Vous pouvez également utiliser .on pour attacher l'événement spécifique aux éléments correspondants.

  $("li.searchterm").on("click",function() {    
   console.log('testing');
});

Js Fiddle

11
Sachin

Utilisez .on ()

Comme votre contenu est ajouté de manière dynamique, il n'est donc pas directement accessible. Vous devez donc utiliser la délégation d'événements.

$('#results').on('click','li.searchterm',function() {    
    console.log('testing');
});
4
Tushar Gupta

Soit faire

$( "li .searchterm" ).on('click', function() {    
   console.log('testing');
});

OR

<li class="device_result searchterm" data-url="Apple-iphone-5s" onclick="clickFunc(1)">
   <a href="#">Apple iPhone 5s</a>
</li>
<li class="device_result searchterm" data-url="Apple-iphone-5c" onclick="clickFunc(2)">
   <a href="#">Apple iPhone 5s</a>
</li>

Et le javascrip

function clickFunc(id) {
   console.log('Do something with ' + id);
}
2
zzlalani
$( "li.searchterm" ).on('click',function() {    
   console.log('testing');
});
1
kasper Taeymans

Vous pouvez le faire sans affecter id à ul 

$('ul').on('click','li.searchterm',function(){
//do your stuffhere;
});
0
Mohsin Shoukat