jquery点击事件答案

【问题标题】：jquery click eventjquery点击事件
【发布时间】：2010-09-03 14:40:37
【问题描述】：

我有一些看起来像这样的 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 会不断获取附加到它的数据。如何限制它只能点击一次？

【问题讨论】：

标签： javascript jquery ajax dom

【解决方案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);

【讨论】：

另外我想提一下$.ajax 可以提供beforeSend 和complete 回调来处理禁用/隐藏控件，并提供比.one() 更好的错误恢复。
@Paulo 你能给我一个你的答案 B 的例子吗？

【解决方案2】：

您可以使用全局变量，例如

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

或使用.one("click", function () { ... }) 代替之前的点击函数，每个元素最多执行一次处理程序。详情请见http://api.jquery.com/one/。

【讨论】：