it-swarm.com.de

Mit jQuery auf ein li-Element klicken

Ich habe ein <ul>-Element, das dynamisch die <li>-Elemente generiert, und möchte einfach ein onclick-Ereignis ausführen

<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>

Ich habe die folgende jQuery in einem $(document).ready-Block, aber es scheint nicht zu funktionieren - irgendwelche Ideen, was ich falsch mache?

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

wenn Sie das Add-In hinzufügen, fügen Sie den Klick in die Liste ein und wählen Sie die Elemente aus:

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

versuchen Sie es mit der Geige: http://jsfiddle.net/emPKS/

16
Edorka

Entfernen Sie den Platz im Wähler

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

und Sie können auch .on verwenden, um das bestimmte Ereignis an die übereinstimmenden Elemente anzuhängen

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

Js Fiddle

11
Sachin

Verwenden Sie .on ()

Da Ihr Inhalt dynamisch hinzugefügt wird und nicht direkt darauf zugegriffen werden kann, müssen Sie die Ereignisübertragung verwenden.

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

Entweder tun

$( "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>

Und der Javascrip

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

Sie können dies tun, ohne der ul eine ID zuzuweisen 

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