I have a collapsible as a list item in a listview, in a jquery mobile application.
Since I am dynamically binding to the list via knockout I have handlers which take the responsibility of initializing the listview. Hence my markup is simple.
<div data-role="page" id="p1">
<div data-role="content">
<ul id="mylist" data-bind="foreach: items, jqmRefreshList: items">
<li>
<div>
<h2 data-bind="text: txt"></h2>
<p data-bind="text: desc"></p>
</div>
</li>
</ul>
</div>
</div>
The binding handler is written like this:
ko.bindingHandlers.jqmRefreshList = {
update: function (element, valueAccessor) {
ko.utils.unwrapObservable(valueAccessor());
try {
console.log('executed');
console.log(element);
$(element).listview();
var e = $(element).find('li >div');
e.collapsible({iconpos: "right"});
} catch (ex) {
console.log(ex);
}
}
};
In spite of the statement e.collapsible({iconpos: "right"});
the collapsible element shows up with image on left, not right.
Fiddle: http://jsfiddle.net/yxbv7h9g/2/
You are using a quite old version (1.2) of jQuery mobile where the setting is called iconPos
with an uppercase P
:
var e = $(element).find('li >div');
e.collapsible({iconPos: "right"});
Demo JSFiddle.
However this setting name changed in version 1.3.0 with fixing #4899.
So if you upgrade your jQuery mobile version then your original code will also work: Demo JSFiddle.