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

经历了一段陡峭的学习曲线，我目前正在试验各种UX“玩具”，我需要它们来实现一个应用程序。其中之一是动态禁用按钮，然后启用按钮。按照的说明，我编写了一段代码来测试它。单击“Soap”运行一系列链接承诺，并切换“Soap1”按钮

禁用

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>

香皂
$（“#btn_soap1”）。按钮（{//需要初始化
禁用：false
});
$（“#btn_soap”）。在（“单击”，函数（）{
//从标记中的onClick内容冒泡
var isDis=$（“#btn_soap1”）。按钮（“选项”，“禁用”）；
$（“#btn_soap1”）。按钮（“选项”、“禁用”、！isDis）；
//var但是=$（“#btn_soap1”）；
//var className=“ui状态已禁用”；
//if（但是.hasClass（类名））{
//但是.removeClass（className）；
//}其他{
//但是.addClass（className）；
//                }
});

预期渲染

中断渲染（所有浏览器和设备模拟人生和设备）

问：你能在JS中看到任何会导致这种副作用的noob错误吗。我（在评论中）添加了我的工作环境，它按照规定工作，但似乎违反直觉

编辑：（摘自Duc Nguyen先生的答案）。中断渲染的是添加初始化。如果它不在那里，我会收到一个异常，抱怨在更改

禁用状态时，我在初始化之前调用了一个函数

再次编辑：发现JSFIDLE
 编辑：基于JSFIDLE的新答案

您遇到了一个非常有趣的情况，以下几点：


jQM有一个自动初始化机制，如果你想利用它，你必须遵循规则，或者完全禁用它，自己初始化
您有2个“按钮”，但实际上是1个

jQM可能会让您感到困惑，
，我已经清理了一些东西。
这就是我正在努力解决的问题。若我按照你们的建议去做，我会得到一个异常
Uncaught错误：在初始化之前不能调用按钮上的方法；试图调用方法“disable”
。。。表明它未初始化。所以我添加了“初始化”的东西，这破坏了渲染。同样的结果（可以预见）。它未初始化，因此初始化代码将执行。。。并中断渲染。真正的问题是
为什么不在文档生命周期的那个阶段初始化它
。谢谢你+事实上，用jQM检查小部件是否初始化是相当棘手的。我已经用1.4.5（现在是最新版本）尝试了这段代码，它成功了。我对代码做了一些修改，如果您仍然有问题，那么问题一定在其他地方。如果您可以提供一个JSFIDLE链接，我可以再次帮助更多：）thks让我发现JSFIDLE:）。。。如果可以的话，我会把你的答案投两次赞成票。问题主体中的小提琴链接。
    <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>

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