Question

First I tried like this:

$('.choose-car li:not(.selected)').click(function () {
    console.log('works and with selected');
    $(this).addClass('selected');
});

Then I thought a litle and and tried like this:

$('.choose-car li:not(.selected)').on('click', function () {
    console.log('works and with selected');
    $(this).addClass('selected');
});

both works with selected..

But now I thinking maybe I have to remove click event after first click or is there easier solution? Maybe I missing something?

Answer 1

Your code is adding the selected class after you register the handler. This is probably not what you want, since the handler will remain bound to the element even after it acquires the selected class.

Try delegating the event instead:

$(".choose-car").on("click", "li:not(.selected)", function() {
    $(this).addClass("selected");
});