javascript - jQuery を使用して li 要素を「クリック」する

Question

要素を<ul>動的に生成する要素があり、単にイベント<li>を実行したい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>

ブロックに次のjQueryがあり$(document).readyますが、うまくいかないようです - 私が間違っていることはありますか?

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

Answer 1

動的に追加する場合は、リストをクリックして項目を選択します。

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

フィドルを試してみてください: http://jsfiddle.net/emPKS/

Answer 2

セレクターのスペースを削除します

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

.onまた、一致した要素に特定のイベントを添付するために使用することもできます

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

JSフィドル

Answer 3

.on()を使用する

コンテンツは動的に追加されるため、直接アクセスできないため、イベント委任を使用する必要があります。

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

Answer 4

どちらか

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

また

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

そしてJavascript

function clickFunc(id) {
   console.log('Do something with ' + id);
}

Answer 5

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