jquery点击事件

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/。