有状态的按钮脚本阻止表单提交？答案

【问题标题】：Stateful button script blocks form submit?有状态的按钮脚本阻止表单提交？
【发布时间】：2012-03-27 07:54:19
【问题描述】：

我正在使用Twitter Bootstrap Button JS，有状态按钮部分。

一切都按预期工作，但有时当单击按钮时 - 它会“阻止”表单提交事件。然后没有提交表单，也没有将按钮改回启用状态。

基本上最后我没有提交表单和禁用按钮。

怎么了？

标记 - 这里没什么特别的，只是一些检票口标记：

<button class="btn btn-primary" wicket:id="submit" type="submit">
    <i class="icon-white icon-ok"></i>&nbsp;<wicket:message key="label"/>
</button>

还有按钮类。只需添加 JS 工作所需的属性并在页面加载时执行脚本：

public class StatefullButton extends Button {

    public StatefullButton(String id, IModel<String> loadingText) {
        super(id);
        setOutputMarkupId(true);
        add(AttributeModifier.append("data-loading-text", loadingText));
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        response.renderJavaScriptReference(BootstrapButtonPluginResourceReference.get());
        response.renderOnDomReadyJavaScript("$('#" + this.getMarkupId() + "').button();");
        response.renderOnDomReadyJavaScript("$('#" + this.getMarkupId() + "').click(" +
            "function(){" +
                "var btn = $(this) \n" +
                "btn.button('loading')" +
            "})");
    }
}

【问题讨论】：

你能提供一些代码吗？
为按钮添加了 html 标记和 java 代码。所有 JS 均来自 Twitter Bottstrap#Buttons
注意到，当我将鼠标指针从按钮上移开时，我可以重现问题，点击后非常快。不是 100%。
我不确定原因。乍一看，这可能是一个 javascript 问题。但我必须更深入地研究它（将构建我自己的测试用例，......）。认为这需要一些时间:(我希望在此期间其他人有一个很好的答案。

标签： button wicket twitter-bootstrap

【解决方案1】：

我无法使用按钮解决问题，但找到了使用 SubmitLink 并像这样覆盖 getTriggerJavaScript 的解决方法。

@Override
protected String getTriggerJavaScript(){
    String script = super.getTriggerJavaScript();
    String loadingScript = "$(this).button('loading');";
    return loadingScript + script;
}

【讨论】：