Любой способ может добавить событие click к дочерним узлам?

Question

Ниже мой код:

<div class="sidebar-list"> 
    <h4>Type</h4> 
    <ul> 
    <li><a href="#" id='shop'> Shop</a></li> 
    <li><a href="#" id='food'> Food</a></li> 
    <li><a href="#" id='beauty'> Beauty</a></li> 
    <li><a href="#" id='comfort'>Comfort</a></li> 
    <li><a href="#" id='health'> Health</a></li> 
    <li><a href="#" id='pet'> Pet</a></li> 
    <li><a href="#" id='fun'> Fun</a></li> 
    <li><a href="#" id='life'> Life</a></li> 
    </ul> 
</div> 

Я знаю, что могу написать часов до каждого элемента Li, но любой умный способ, чтобы добавить событие слушать слушать элемент списка из списка врезке-лист щелкнул и получить значение его ?

Answer 1

Try:

$('.sidebar-list').on('click', 'li', function() { 
 
    alert($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar-list"> 
 
    <h4>Type</h4> 
 
    <ul> 
 
    <li><a href="#" id='shop'> Shop</a></li> 
 
    <li><a href="#" id='food'> Food</a></li> 
 
    <li><a href="#" id='beauty'> Beauty</a></li> 
 
    <li><a href="#" id='comfort'>Comfort</a></li> 
 
    <li><a href="#" id='health'> Health</a></li> 
 
    <li><a href="#" id='pet'> Pet</a></li> 
 
    <li><a href="#" id='fun'> Fun</a></li> 
 
    <li><a href="#" id='life'> Life</a></li> 
 
    </ul> 
 
</div>

Answer 2

$('ul').delegate('a', 'click', function() { 
    // ... your code ... 
}); 

Answer 3

Вы ищете что-то вроде этого? См. Скрипт ниже. Простой JQuery нажмите событие ...

$('.sidebar-list li').click(function(){ 
 
    alert($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar-list"> 
 
    <h4>Type</h4> 
 
    <ul> 
 
    <li><a href="#" id='shop'> Shop</a></li> 
 
    <li><a href="#" id='food'> Food</a></li> 
 
    <li><a href="#" id='beauty'> Beauty</a></li> 
 
    <li><a href="#" id='comfort'>Comfort</a></li> 
 
    <li><a href="#" id='health'> Health</a></li> 
 
    <li><a href="#" id='pet'> Pet</a></li> 
 
    <li><a href="#" id='fun'> Fun</a></li> 
 
    <li><a href="#" id='life'> Life</a></li> 
 
    </ul> 
 
</div>

Answer 4

var div = document.querySelector(".sidebar-list"), 
    addEvent = (obj, type, fn) => { 
     if (obj.attachEvent) { 
     obj['e'+type+fn] = fn; 
     obj[type+fn] = function(){obj['e'+type+fn](window.event);} 
     obj.attachEvent('on'+type, obj[type+fn]); 
     } else 
     obj.addEventListener(type, fn, false); 
    }; 
addEvent(div, "click", (ev) => { 
    var event = ev || window.event; 
     target = event.target || event.srcElement; 
    // do something with your target 
}); 

Нет необходимости JQuery, если он уже не используется в вашей странице (обратите внимание, что polyfill от автора JQuery .. .)