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 () { ... })代替上一个click函数，每个元素最多执行一次处理程序。有关详细信息，请参阅http://api.jquery.com/one/。

jquery点击事件

2 个答案: