jQuery Mobile - изменение флип-переключателя по щелчку

У меня отключен флип-свитч. При нажатии на флип-переключатель появляется всплывающее окно с вопросом, уверены ли они, что хотят изменить флип-переключатель. Если они нажмут «да», им придется повторно ответить на несколько вопросов. Я хочу иметь возможность менять флип-переключатель, отвечать на вопросы, затем возвращаться и снова менять флип-переключатель, повторно отвечать на вопросы... и т. д. По какой-то причине, когда я нажимаю на флип-переключатель, он работает при первом нажатии, но при втором щелчке он меняется это от да к нет (или наоборот) и обратно. Это почти как если бы он записывал, сколько раз он был нажат.

Вот скрипка, показывающая проблему

Вот мой код:

$("#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>

jquery jquery-mobile jquery-mobile-popup jquery-mobile-flipswitch
person michelle    schedule 17.03.2014    source источник
comment
просто предложение. Это не решит вашу проблему, но упростит ваш код. Вы можете использовать $("#US_toggle .ui-flipswitch").toggleClass('ui-flipswitch-active') вместо всего hasClass, если статус   -  person Neville Nazerane    schedule 17.03.2014
comment
Можете ли вы показать нам свою HTML-разметку или, что еще лучше, создать скрипт, воспроизводящий проблему?   -  person ezanker    schedule 17.03.2014
comment
@NevilleNazerane Я попробовал ваше предложение, и, к сожалению, оно не удалило и не добавило класс.   -  person michelle    schedule 17.03.2014
comment
@ezanker Я добавил HTML. Попробую собрать скрипку.   -  person michelle    schedule 17.03.2014
comment
@ezanker — создана скрипка   -  person michelle    schedule 17.03.2014
comment
@michelle Я не думаю, что вы использовали его прямо здесь, это скрипта js кода, используемого в разрешенном jsfiddle.   -  person Neville Nazerane    schedule 18.03.2014

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в том, что вы добавляете код клика к кнопке 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

person ezanker    schedule 17.03.2014
comment
Работает отлично! Большое спасибо за решение моей проблемы! - person michelle; 17.03.2014
comment
Пожалуйста. Пожалуйста, смотрите мой обновленный ответ, я думаю, что код лучше переключать выбранное значение, а не классы... - person ezanker; 17.03.2014