CODEWITHSUNDEEP
javascriptjquery-mobile
mwilson
mwilson

Reputation: 12900

jQuery Mobile Flipswitch not converting to flipswitch. remains a checkbox

I have a comments thread that I'm trying to append the jquery mobile flipswitch widget to. I am applying the HTML via JavaScript and I'm not sure if this is where my issue is at. Within the DOM, i see the correct HTML and it's identical to the example posted on the site (https://api.jquerymobile.com/flipswitch/). However, I can't seem to get the checkbox to actually convert to the flipswitch. Below is the JavaScript in question:

            var html = "";
            html += "<fieldset>";
            html += "<div data-role='fieldcontain'>";
            html += "<input type='checkbox' data-role='flipswitch'>";
            html += "</div>";
            html += "</fieldset>";
            $('#feedContainer').html(html);

The Site that I'm working on is 100% jquery mobile and everything else is working fine.

Upvotes: 0

Views: 101

Answers (1)

mwilson
mwilson

Reputation: 12900

It looks like the main issue here is that the jQuery Mobile requires you to 'refresh' the styling when adding dynamic content. I changed my code to the below snippet and it worked:

var flipper = "<input class='theFlipSwitch' type='checkbox' data-role='flipswitch'>";

html += "<span class='theFlipSwitch'></span>";
$('.theFlipSwitch').append(flipper).enhanceWithin();

Upvotes: 0

Related Questions