Question

请按照下面的代码知道如何使此切换按钮正常工作。它仅在第一次单击后才起作用，然后按钮值不会改变

<script type='text/javascript'>
    $(window).load(function () {
        fill.addEventListener("click", function (event) {

            if ($(this).attr('value') == 'Top Up') {
                $('#fill').prev('.ui-btn-inner').children('.ui-btn-text').html('Stop');
                $('#fill').buttonMarkup({
                    theme: "c"
                });
            } else {
                $('#fill').prev('.ui-btn-inner').children('.ui-btn-text').html('Stopping');
                $('#fill').buttonMarkup({
                    theme: "b"
                });
            }

        });
    });
</script>
</head>
<body>
    <input id="fill" type="button" data-inline="true" value="Top Up" data-mini="true"
    data-theme="c" />

Answer 1

这个modified fiddle按预期工作我希望：

fill.addEventListener("click", function(event)
{
        if ($(this).attr('value') == 'Top Up')
        {
            $(this).val('Stop');
            $(this).prev('.ui-btn-inner').children('.ui-btn-text').html('Stop');
            $(this).buttonMarkup({ theme: "c" });
        }       


       else
        {
            $(this).val('Stopping');
            $(this).prev('.ui-btn-inner').children('.ui-btn-text').html('Stopping');
            $(this).buttonMarkup({ theme: "b" });
        } 
});

Answer 2

在更改$(this)元素

的HTML时更改值

$(this).val("Stop");

修改后的代码 http://jsfiddle.net/2MbsG/5/

Answer 3

它的工作原理应该如何。每次点击后，您都不会更改value属性，因此if不会进入else选项。

使用Jquery Mobile的Javascript切换按钮

3 个答案: