jQuery Mobile - 单击时更改翻转开关

Question

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

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

问题是每次启动弹出窗口时，您都将点击代码添加到 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');
    };
});

更新：与其切换类，不如切换选择值然后刷新翻转开关：

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

新FIDDLE