Question

当试图非常快地单击选项卡时，两个选项卡在Jquery SmartWizard.js插件中被选中我尝试了这种方式但没有运气任何人经历过这个...并且还尝试了.on /.off事件没有运气。< / p>

$($this.steps).bind("click", function (e) {

    //e.stopImmediatePropagation();       
    $($this.steps).unbind("click");

    if ($this.steps.index(this) == $this.curStepIdx) {

        return false;
    }
    var nextStepIdx = $this.steps.index(this);
    var isDone = $this.steps.eq(nextStepIdx).attr("isDone") - 0;
    if (isDone == 1) {
        _loadContent($this, nextStepIdx);
    }

    $($this.steps).bind("click");
    return false;
});

Answer 1

也许设置一个全局变量并检查全局变量是否为真？单击后，您可以使用内置的javascript delay（）函数设置一个短暂的延迟。例如，

go=true;
onclick:
    go=false;
    delay(100, some filler event);
    go=true;

编辑：此链接可能有所帮助：http://ejohn.org/blog/how-javascript-timers-work/

编辑：在jQuery中试试这个：

$('id').click(function() {return false;});

然后设置延迟并将其设置回来。

编辑：this似乎对我有用。请注意，如果您以较小的延迟点击链接两次，它将只闪一次。除非你真的快速地将按钮垃圾邮件大约10次，否则它可以正常工作。（使用最新的Chrome btw）

编辑：http://jsfiddle.net/ZDHZv/2/对我来说很好。如果您对标签使用该方法，则无法获得双重选择。使用$('.selected')

中使用的任何插件实现该功能

Answer 2

我通常做这样的事情：

var selection;
$('a').click(function () {
    if (selection !== undefined) {
        selection.removeClass('selected');
    }
    selection = $(this);
    selection.addClass('selected');
});

http://jsfiddle.net/ZDHZv/7/

但我发现你也可以这样做，假设所有的标签都是兄弟姐妹，没有别的：

$('a').click(function () {
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
});

http://jsfiddle.net/ZDHZv/9/

Answer 3

您可以尝试这样的事情：

var process = false;
$($this.steps).bind("click", function (e) {
    if (process) {
        return false;
    }
    process = true; 

    if ($this.steps.index(this) == $this.curStepIdx) {

        return false;
    }
    var nextStepIdx = $this.steps.index(this);
    var isDone = $this.steps.eq(nextStepIdx).attr("isDone") - 0;
    if (isDone == 1) {
        _loadContent($this, nextStepIdx);
    }
    process = false;
    return false;
});

Answer 4

在我阅读了400多行源代码之后，我想我知道问题所在。

它位于函数_loadContent中。由于ajax，内容加载是异步的，并且在ajax加载后设置为select。

因此，虽然单击已完成，但在加载上一个选项卡时可以选择下一个选项卡。

我得到两个答案。

让ajax同步。喜欢
```
var ajax_args = {
    ...
    async : false,
    ...
```
它可以保证所选的和所有的顺序。但是，正如您所知，它将迫使用户等待内容加载完成。

立即设置选中，然后设置错误样式。喜欢

...
var stepNum = stepIdx + 1;
_showStep($this, stepIdx);// add this to set selected immediately.
if (ajaxurl && ajaxurl.length > 0) {
    if ($this.options.contentCache && hasContent) {
        return; // remove this and other _showStep calls.
    } else {
        var ajax_args = {
            ...
            error : function() {
                $this.loader.hide();
                $this.showError(stepIdx);// show error.
            },
            ...

选择的顺序可以。但是ajax加载和错误样式将变为异步。

这是你的电话。

Answer 5

嗨，大家好，感谢您的努力，我通过使用UI块插件阻止UI来解决问题

$($this.steps).on("click", function (e) {

    e.preventDefault();
    e.stopImmediatePropagation();
    if ($(this).attr('class') !== 'disabled' && $(this).attr('class') !== 'selected' && $(this).attr('class') !== 'error') {

        $('div.swMain').block({ message: "Processing..." });
    }

    try {

        if ($this.steps.index(this) == $this.curStepIdx) {

            $('div.swMain').unblock();
            return false;
        }

        var nextStepIdx = $this.steps.index(this);
        var isDone = $this.steps.eq(nextStepIdx).attr("isDone") - 0;
        if (isDone == 1) {           
            e.preventDefault();
            _loadContent($this, nextStepIdx);

        }
    }
    catch (e) {

        $($this.steps).on("click");
        console.log("Fast click Error ===>   " + e);
    }


    if ($(this).attr('class') !== 'disabled' && $(this).attr('class') !== 'selected' && $(this).attr('class') !== 'error') {

        $('div.swMain').unblock();
    }

    return false;
});

单击选项卡非常快，两个选项卡已选中

5 个答案: