событие jquery click

Question

У меня есть некоторый jquery, который выглядит следующим образом:

    $('.career_select .selectitems').click(function(){
    var selectedCareer = $(this).attr('title');
    $.ajax({
        type: 'POST',
        url: '/roadmap/step_two',
        data: 'career_choice='+selectedCareer+"&ajax=true&submit_career=Next",
        success: function(html){
            $('.hfeed').append(html);
            $('#grade_choice').SelectCustomizer();
          }
    });
});

Моя проблема в том, что если пользователь продолжает нажимать, тогда .hfeed продолжает добавлять к нему данные.Как я могу ограничить его, чтобы на него можно было нажать только один раз?

Answer 1

Используйте функцию one:

Присоедините обработчик к событию для элементов.Обработчик выполняется не более одного раза для каждого элемента

Если вы хотите, чтобы элемент нажимался только один раз, а затем снова включался после завершения запроса, вы можете:

A)Сохраняйте переменную состояния, которая обновляется, если запрос выполняется в данный момент, и завершается в начале события, если оно есть.
B) Используйте one, поместите код в функцию и выполните повторную привязку после завершения запроса.

Второй вариант будет выглядеть так:

function myClickEvent() {
    var selectedCareer = $(this).attr('title');
    var that = this;

    $.ajax({
        type: 'POST',
        url: '/roadmap/step_two',
        data: 'career_choice='+selectedCareer+"&ajax=true&submit_career=Next",
        success: function(html){
            $('.hfeed').append(html);
            $('#grade_choice').SelectCustomizer();
        },
        complete: function() {
            $(that).one('click', myClickEvent);
        }
    });
}

$('.career_select .selectitems').one('click', myClickEvent);

Answer 2

Вы можете использовать глобальную переменную, такую ​​как

var added = false;
$('.career_select .selectitems').click(function(){
    if(!added) {
        // previous code here
        added = true;
    }
});

или используйте .one("click", function () { ... }) вместо предыдущей функции щелчка для выполнения обработчика не более одного раза для каждого элемента. Подробнее см. http://api.jquery.com/one/.