Функция jCuery addClass не работает без каких-либо ошибок

Question

Я хочу динамически (по клику) добавить «выбранный» класс к элементу div, но он не работает и не выдает ошибку.Даже в консоли он также работает без сбоев или ошибок.

<div class="col s8 m4 card-box cursor-pointer">
<div class="card"
     id="object__{{ key }}"
     name = "{{ value }}__{{ key }}__{{ qb_id }}"
     oncontextmenu="chapter_context_menu(event, {{ qb_id }}, {{ key }}, '{{ value }}');">
    <div class="card-content  light-blue lighten-4">
        <span class="card-title black-text">{{ value }}</span>
        <p class="grey-text text-darken-2">Chapter {{ forloop.counter }}</p>
    </div>
    <div class="card-action">
        {% include 'question_edition/reusable/edit_chapter/edit_chapter_icon_trigger.html' %}
        {% include 'question_deletion/reusable/delete_chapter/chapter_delete_icon_trigger.html' %}
    </div>
</div>

function object_selected(card_id) {
   object_unselected();
   console.log("#"+card_id);
   var card = $('#'+card_id);
   card.addClass("object-selected");
}

$(".card").click(function(e){
    object_selected($(this).attr('id'));
});

Консоль и оповещения работают абсолютно нормально, ошибок нет.Но список классов остается неизменным.Пожалуйста, помогите мне решить эту проблему.

Answer 1

Переключить класс «выбранный» по щелчку, при повторном нажатии удаляет его и так далее каждый раз, когда щелкает / снимает щелчок, как переключатель

jQuery('.card').off().on('click', function card_click(){
   jQuery(this).toggleClass('selected');
});

или

Добавлять только выбранный класс можно только по клику

jQuery('.card').off().on('click', function card_click(){
   jQuery(this).addClass('selected');
});

В вашем примере

var card = $ ('#' + card_id);

неправильная часть в том, что $ ('#' + card_id); не является объектом DOM.Вы должны написать так, если у вашего DOM-объекта есть определенный card_id

var card = jQuery ("\" # "+ card_id +" \ "");

Answer 2

   $('.card').on('click', function(){     /* $(_selector_).no('click',...) for work if dynamically adding divs*/
   	      /* for remove all selected class */
   	    $('.card').removeClass('selected');
   	    /* for add selected class on this div  */
   	    $(this).addClass('selected');
   });

/* all css only for demonstration */       
       .card{
       	  border-style:solid;
       	  border-color:gray;
       	  border-width:4px;
       	  padding:2px;
       	  margin:1px;
       	  cursor:pointer;
       }
       /* add declare selected class after main class */
       .selected{
       	  border-color:red;
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <div class="card">card1</div>
    <div class="card">card2</div>
    <div class="card">card3</div>