ToggleClass在FontAwesome上无法正常工作

Question

I'm trying to change the triangle direction on click and with this code, everything works perfect, but now I want to change the first direction because the list is hidden, so, why when I change the first fa-caret-down with right and change the other triangle accordingly it doesn't work?

collapsible.append('<h5>' + scheme.name + " " + '<em class="fa fa-caret-down"></span></h5>');

if ($('.SchemeSearchExp').length) {
    $("div.schemeHead>h5").click(function () {
        $(this).next('.streetname').toggle();
        $(this).children("em").toggleClass('fa-caret-right');
    });
}

Answer 1

Use Event Delegation using .on() , when manipulation selector (ie removing and adding classes).

Change your code to

 $(document).on('click', ".fa-caret-right", function(){ $(this).next('.streetname').toggle(); $(this).toggleClass('fa-caret-down'); }); 

$(document).on('click', "em.fa", function () {
    $(this).next('.streetname').toggle();
    $(this).toggleClass('fa-caret-right fa-caret-down');
});

In place of document you should use closest static container. A good read Direct and delegated events

Additionally, You should use if block in the event handlers