I'm using Backbone and jqm. I recently upgraded jqm from 1.3.1 to 1.3.2. I'm using jquery 2.0.3.
I enable and disable linkbindingEnabled based on the backbone view which is loaded. If the view has
In 1.3.1 when I click the listview it works well. The list is shown and I can select an option.
But in 1.3.2, when I click the listview, the listview shows all the options and then an exception is thrown in jquery Sizzle.error which says "Error: Syntax error, unrecognized expression: #".
The code below is the HTML code for creating a list in jqm.
<div data-role="content">
<ul data-role="listview" data-theme="d" data-divider-theme="d">
<li data-role="list-divider">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<label for="select-status">Status</label>
<select name="select-status" id="select-status" data-prevent-focus-zoom="true" data-theme="d" data-overlay-theme="d" data-iconshadow="false"
data-native-menu="false" multiple>
<option value="all">All</option>
<option value="open">Open</option>
<option value="completed">Completed</option>
<option value="cancelled">Cancelled</option>
</select>
<select name="select-dates" id="select-dates" data-prevent-focus-zoom="true" data-theme="d" data-overlay-theme="d" data-native-menu="false" data-iconshadow="false">
<optgroup label="Day">
<option value="Yesterday">Yesterday</option>
<option value="Today">Today</option>
<option value="Tomorrow">Tomorrow</option>
<option value="All">All days</option>
</optgroup>
<optgroup label="Week">
<option value="ThisWeek">This Week</option>
<option value="LastWeek">Last Week</option>
<option value="NextWeek">Next Week</option>
</optgroup>
</select>
</fieldset>
<span style="display: none; padding-left: 5px;">
<a id="a15" href="#" data-rel="popup">
<img id="imgFilter" src="~/Content/images/filter.png" alt="filter" />
</a>
<span id="spanFilterText">All Appointments</span>
</span>
</li>
</ul>
</div>
In my backbone router I have a view which is loaded like this
var AppRouter = Backbone.Router.extend({
home: function () {
this.models.AppointmentList = new AppointmentList();
var view = new HomePageView({ model: this.models.AppointmentList });
$.mobile.linkBindingEnabled = false;
},
agenda: function () {
if (!this.models.AppointmentList)
this.models.AppointmentList = new AppointmentList();
var view = new AgendaPageView({ model: this.models.AppointmentList })
$.mobile.linkBindingEnabled = true;
},
});
Any ideas?
