Question

我有一个禁用的翻转开关。当点击翻转开关时，会出现一个弹出窗口，询问用户是否确定要更改翻转开关。如果他们点击是，那么他们将不得不重新提出几个问题。我希望能够更改flipswitch，回答问题，然后返回并再次更改flipswitch，重新提出问题......等等。出于某种原因，当我点击flipswitch时，它在第一次点击时工作，但第二次点击它会改变从是到否（或其他方式）和返回。它几乎就像记录它被点击了多少次一样。

Here is a fiddle to show the issue

这是我的代码：

$("#US_toggle").click(function(){ //flipswitch is clicked
  $('#US_Popup').popup('open'); //popup is opened
  $('#US_changeYes').click(function(){
    if($("#US_toggle .ui-flipswitch").hasClass('ui-flipswitch-active')){                
      $("#US_toggle .ui-flipswitch").removeClass('ui-flipswitch-active');
    }else{
      $("#US_toggle .ui-flipswitch").addClass('ui-flipswitch-active');
    };
  });
});

这是html：

<div id="US_toggle" class="floatRight">             
    <select name="US_flipswitch" id="US_flipswitch" data-role="flipswitch" data-theme="c" disabled="disabled">
      <option value="off">No</option>
      <option value="on">Yes</option>
    </select>               
</div>

Answer 1

问题是，每次启动弹出窗口时，您都会将click代码添加到changeYes按钮。您应该只在div点击之外添加一次：

更新了 FIDDLE

$("#US_toggle").click(function () {
    $('#US_Popup').popup('open');

});

$('#US_changeYes').click(function () {
    if ($("#US_toggle .ui-flipswitch").hasClass('ui-flipswitch-active')) {
        $("#US_toggle .ui-flipswitch").removeClass('ui-flipswitch-active');
    } else {
        $("#US_toggle .ui-flipswitch").addClass('ui-flipswitch-active');
    };
});

更新：不是切换类，最好切换选择值，然后刷新flipswitch：

$('#US_changeYes').click(function () {
    var curVal = $("#US_flipswitch").val();
    curVal == "off" ? $("#US_flipswitch").val("on").flipswitch("refresh") : $("#US_flipswitch").val("off").flipswitch("refresh");
});

新 FIDDLE

jQuery Mobile - 在点击时更改flipswitch

1 个答案: