JQuery onClick работает только один раз

Я проверил несколько ответов на этот вопрос, и у меня ничего не получается. У меня есть набор кнопок, которые будут запускать вызов Ajax, и этот вызов заменит кнопки новыми с обновленной информацией. Это работает при первом щелчке, но не при последующих щелчках.

Группа кнопок выглядит так:

<div class = "btn-toolbar" role = "toolbar" aria-label = "Voting Toolbar">
    <div class = "leanVote_target">
        <div class = "btn-group mr-2" role = "group" aria-label = "Lean Votes">
            <button type = "button" id = "2_-3" {% if vote.leanVote == -3 %} class = "voteButton btn-sm btn-success"{% else %} class = "voteButton btn-sm btn-primary"{% endif %}>Left</button>
            <button type = "button" id = "2_-2" {% if vote.leanVote == -2 %} class = "voteButton btn-sm btn-success"{% else %} class = "voteButton btn-sm btn-primary"{% endif %}>2</button>
            <button type = "button" id = "2_-1" {% if vote.leanVote == -1 %} class = "voteButton btn-sm btn-success"{% else %} class = "voteButton btn-sm btn-primary"{% endif %}>1</button>
            <button type = "button" id = "2_0" {% if vote.leanVote == 0 %} class = "voteButton btn-sm btn-success"{% else %} class = "voteButton btn-sm btn-primary"{% endif %}>Center</button>
            <button type = "button" id = "2_1" {% if vote.leanVote == 1 %} class = "voteButton btn-sm btn-success"{% else %} class = "voteButton btn-sm btn-primary"{% endif %}>1</button>
            <button type = "button" id = "2_2" {% if vote.leanVote == 2 %} class = "voteButton btn-sm btn-success"{% else %} class = "voteButton btn-sm btn-primary"{% endif %}>2</button>
            <button type = "button" id = "2_3" {% if vote.leanVote == 3 %} class = "voteButton btn-sm btn-success"{% else %} class = "voteButton btn-sm btn-primary"{% endif %}>Right</button>
        </div>
    </div>
</div>

Таким образом, это будет основная кнопка, если она не выбрана, и кнопка успеха, если она выбрана. Затем у меня есть следующий код JQuery:

<script>
    function sendVote(id, type, vote) {
        $.ajax({
            url:'/webproxy/v/?i=c&pk=' + id + '&t='+type+'&v='+vote,
            type:'get',
            dataType:'html',
            crossDomain:true,
            success:function(data) {
                if (type == 2) {
                    $(".leanVote_target").html(data);
                } else if (type == 1) {
                    $(".credVote_target").html(data);
                } else if (type == 3) {
                    $(".controlVote_target").html(data);            
                }
            },
            error: function(data) {
                return data;
                //$(".leanVote_target").html(data);
            }
        });
    }

    $(document).ready(function(){
        $(".btn-group").on("click", '.voteButton', function( event ) {
            var parts = event.target.id.split("_");
            sendVote({{comment.id}}, parts[0], parts[1]);
        });
    });
</script>

Это правильно отправляет голос / webproxy / v / при первом щелчке. Затем сценарий в / webproxy / v / возвращает идентичный btn-group, но с обновленным цветом, чтобы показать последнее голосование. Я могу подтвердить, что это работает, обновления цвета, обновления базы данных, и я вижу запрос в журналах моего веб-сервера. При втором щелчке событие не срабатывает. Я попытался выполнить console.info('hello world') внутри события on-click, и поэтому я уверен, что именно на том уровне, на котором у меня возникла ошибка. Событие on-click не срабатывает при втором щелчке, поэтому, если я выберу 1, а затем выберу 2, я должен увидеть 2 запроса к серверу и 2 срабатывания событий щелчка, но это не так.

Вот результат возврата сценария / webproxy / v / после нажатия на 2:

<div class = "btn-group mr-2" role = "group" aria-label = "Lean Votes">
    <button type = "button" id = "2_-3"  class = "voteButton btn-sm btn-primary">Left</button>
    <button type = "button" id = "2_-2"  class = "voteButton btn-sm btn-primary">2</button>
    <button type = "button" id = "2_-1"  class = "voteButton btn-sm btn-primary">1</button>
    <button type = "button" id = "2_0"  class = "voteButton btn-sm btn-primary">Center</button>
    <button type = "button" id = "2_1"  class = "voteButton btn-sm btn-primary">1</button>
    <button type = "button" id = "2_2"  class = "voteButton btn-sm btn-success">2</button>
    <button type = "button" id = "2_3"  class = "voteButton btn-sm btn-primary">Right</button>
</div>

Почему при этом не регистрируется .on('click') и как заставить его отвечать неограниченное количество раз?

Спасибо.