Question

经历了陡峭的学习曲线，我目前正在尝试各种用户体验＆＃39;玩具＆＃39;我需要实现一个应用程序。其中一个是disable一个按钮，enable即时。按照the good book的说明，我写了一小段代码来测试它。点击＆＃34; Soap＆＃34;运行一系列链式承诺，并切换＆＃34; Soap1＆＃34;按钮disabled prop。

我的HTML / JS

<div data-role="content">
    <a href="#" id="btn_soap1" class="ui-input-btn ui-btn ui-mini ui-btn-inline ui-icon-back "
       onclick="getInitialNotifications();">Soap1</a>
    <button id="btn_soap" class="ui-btn ui-btn-inline ui-mini ui-icon-bullets "
            onclick="getInitialNotifications();">
        Soap
    </button>

    <script>

        $("#btn_soap1").button({            // required initialization
            disabled:false
        });

        $("#btn_soap").on("click", function () {

            // bubbled from the onClick thingie in the markup

            var isDis = $("#btn_soap1").button("option","disabled");
            $("#btn_soap1").button("option","disabled",!isDis);

//                var but = $("#btn_soap1");
//                var className = "ui-state-disabled";
//                if(but.hasClass(className)) {
//                    but.removeClass(className);
//                } else {
//                    but.addClass(className);
//                }


        });
    </script>
</div>

预期渲染

enter image description here

破碎渲染（所有浏览器和设备模拟器和设备）

enter image description here

问题：您能否在JS中看到任何会导致此副作用的noob错误。我添加了（在评论中）我的解决方案，它按指定的方式工作，但似乎反直觉。

编辑:(来自Duc Nguyen先生的回答）。破坏渲染的是添加初始化。如果不存在，我会在更改disabled状态时，在初始化之前调用函数时发出异常抱怨。

再次编辑：发现了JSfiddle，...... a fiddle that reproduces this

Answer 1

编辑：基于jsFiddle的新答案

你已经陷入了一个非常有趣的境地，下面有几点：

jQM具有自动执行机制，如果你想利用它，你必须遵守规则，或完全禁用它并自己进行初始化。 jQM global config
您有2个“按钮”，但它们实际上是1 <a>和1 <button>，禁用<a>从来都不是一个简单的按钮，请查看disabling html link
jQM可能会让您感到困惑的是<a>标签是按钮小部件，但事实并非如此！它只是具有与按钮相同的样式，而不是按钮小部件。 Button小部件仅适用于<button>和适当的<input>类型（在1.2.0的日子里，我在文档中明确提到它，我在1.4.5文档中找不到它）

所以，以下是我将如何利用jQM自动初始化：

    <a href="#" id="btn_soap1" class="ui-disabled" data-role="button" data-inline="true" data-icon="back">Soap1</a>
    <button id="btn_soap" data-inline="true">Soap</button>

关于<a>：

的通知

属性data-role="button"告诉jQM将其标记为按钮
此课程class="ui-disabled"最初要禁用它。

以及如何即时禁用链接<a>。请注意，只需添加一个类，它就无法在某些特定的臭名昭着的浏览器上运行，请参阅上面的stackoverflow答案以获取更多信息。

    var isDis = $("#btn_soap1").hasClass("ui-disabled");
    if (!isDis) {
        $("#btn_soap1").addClass("ui-disabled");
    } else {
        $("#btn_soap1").removeClass("ui-disabled");
    }

同样，您只能在真实按钮上拨打.button([method])！

看看这个updated jsFiddle，我已经清理了一些东西。

JQM 1.4.5：禁用按钮中断页面呈现

1 个答案: