javascript - jQuery - On active class -
i have materlize collapsible list. want do, change icon of list item when clicks on it. question is, how add event listener checks see if clicked on li, , change icon? collapsible list adds 'active' class li. however, when try listen change, no event fired.
script
$(document).ready(function(){ $(".collapsible li").on('active', function(){ console.log("found event"); }); });
list
<ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>first</div> <div class="collapsible-body"><span>lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>second</div> <div class="collapsible-body"><span>lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>third</div> <div class="collapsible-body"><span>lorem ipsum dolor sit amet.</span></div> </li> </ul>
$(document).ready(function(){ $(".collapsible li").on('click', function(){ // *this* refers current element $(this).find('.material-icons').html('icon_name'); }); });
Comments
Post a Comment