Search code examples
javascriptjqueryappendonsen-uimodifier

Onsenui - list modifier not working inside .append() jquery

ui and I want to make code something like this:

<ons-list id="result"><ons-list-item modifier="tappable">tap</ons-list-item></ons-list>

I want to do this inside javascript using jquery append(). My code goes like this : 

var onsList = $("#result");
onsList.append('<ons-list-item modifier="tappable">1</ons-list-item>');
onsList.append('<ons-list-item modifier="tappable">2</ons-list-item>');
onsList.append('<ons-list-item modifier="tappable">3</ons-list-item>');

it can append alright but the tappable modifier doesn't work..help me please

Solution

  • You need to compile Onsen UI elements if you add them dynamically. Otherwise they will be just empty HTML tags without any magic behind. Something like this:

    var elem = $('<ons-list-item modifier="tappable">1</ons-list-item>');
onsList.append(elem);
ons.compile(elem);

    Notice that the element must be appended before calling ons.compile().