Событие .click () выполняется только в первый раз

Question

У меня есть следующий скрипт, "/ cashflow / arrow /" вызывает представление django, которое получает данные и работает с ними.Затем он возвращает данные, загруженные в html.

Сценарий отлично работает при первом нажатии, но когда я снова хочу щелкнуть ссылку, ничего не происходит.

<script>
$(document).ready(function(){   
    var prev_months = {{ prev_months }}
    var next_months = {{ meses_desp }}  

    function arrow(meses_ant, next_months) {
        $.get("/cashflow/arrow/", { prev_months: prev_months,   next_months: next_months},
          function(data){
            $("#cash_grid").html(data);      
         });
    }

    $("#dates_up").click( function() {
        if (prev_months > 0) {
            prev_months = prev_months - 1;
        }
        next_months = next_months + 1;
        arrow(prev_months, next_months);
    });
    $("#dates_down").click( function() {
        prev_months = prev_months + 1;
        if (next_months > 0) {
            next_months = next_months - 1;
        }
        arrow(prev_months, next_months);
    });

})

Answer 1

Попробуйте использовать .live("click", function() {...}); вместо события click. Например:

$("#dates_up").live("click", function()...
$("#dates_down").live("click", function()...

Подробнее об этом можно прочитать здесь

Answer 2

Может ли возвращаемый вами HTML содержать новую версию элементов с идентификаторами #dates_up и #dates_down? То есть спросить: они живут внутри #cash_grid?

Если это так, то события кликов, которые вы связали в document.ready, теряются при обновлении HTML, поэтому вам придется перепривязывать эти события кликов.

Самый простой способ сделать это - поместить код привязки click () в отдельную функцию, вызвать его в document.ready (), чтобы установить привязки, а затем вызвать его в AJAX get (), чтобы установить новые привязки к новым элементам, которые были возвращены