Очевидная ошибка при объединении jQuery Mobile, jQuery UI и data-role = flipswitch. Как исправить?

#jquery #jquery-ui #jquery-mobile #jquery-mobile-flipswitch

Вопрос:

Я упростил свою проблему до этого:

 <div id='outer'>
   <div id='inner'>
        <label for='flipInput'> Active: </label>
        <input name='flipInput' data-role='flipswitch' />
    </div>
</div>

И помимо включения этих библиотек, эта инструкция скрипта:

 $('#inner').remove();

https://jsfiddle.net/Lenoxus/f1oo4LqL/

Эффект заключается в том, чтобы РАЗВЕРНУТЬ этот «внутренний» div, а не удалять его вместе с дочерними элементами, как я хочу / ожидаю. Этого не произойдет, если на входе нет data-role=’flipswitch’ , который я действительно хочу сохранить. (другими словами, наличие этой роли данных приводит к тому, что метка и ввод сохраняются в процессе удаления, чего они не должны.) Я схожу с ума, пытаясь понять, как этому противостоять.

1. @AWolff опубликуйте это в качестве ответа — мой первый комментарий был мусором 🙂

2. Я не уверен, что вы подразумеваете под «разворачиванием», но я предполагаю, что вы хотите удалить #inner , но сохранить содержимое элемента?

Ответ №1:

Я бы посоветовал вытащить нужные вам элементы label и input , уничтожив созданные flipswitch , удалить div , добавить элементы обратно и инициализировать flipswitch их снова.

Рабочий пример: https://jsfiddle.net/Twisty/2trwL715 /

jQuery

 $(function() {
  var label = $("#inner label");
  var flip = $("#inner input[data-role='flipswitch']").clone();
  var parent = $("#inner").parent();
  $("#inner input[data-role='flipswitch']").flipswitch( "destroy" );
  $("#inner").remove();
  parent.append(flip);
  flip.flipswitch();
});

1. При выполнении некоторого тестирования при запуске я $("#inner input[data-role='flipswitch']").flipswitch( "destroy" ); получаю сообщение об ошибке TypeError: this.removeClass is not a function ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5 /… (строка 6, col 14872)

2. Кажется, я очень плохо объясняю это. Я ХОЧУ уничтожить элемент. В настоящее время существует ошибочное поведение, которое разворачивает, а не уничтожает. Несмотря ни на что, я не могу удалить чертов flipswitch или его сопутствующую метку — что-то в jQuery UI «спасает» их от удаления и добавляет обратно.

3. @Lenoxus вы хотели бы использовать $(selector).flipswitch("destroy") для удаления всех добавленных элементов JQM. Тогда вы могли бы запустить $(selector).remove() . Но я думаю, что вы сообщаете о том, что дочерние элементы остаются после выполнения удаления. Правильно?

4. Да. И это приводит к ошибке, о которой вы упоминали ранее.

5. Похоже, я, возможно, нашел решение. $(‘#input *’).remove()