knockout, jquery mobile listview - get id on click - jquery-mobile

Question

I have a listview like the following:
<ul data-inset="true" data-filter="true" data-bind="foreach: growers" data-role="listview" id="ulGrowerList">
<li><a data-bind="click: $parent.setSelectedClassToGrowerList, attr: {id: growerId}"><span data-bind="text: growerName, attr: {id: growerId}, click: $parent.setSelectedClassToGrowerList" /></a></li>
</ul>
My setSelectedClassToGrowerList looks like this:
self.setSelectedClassToGrowerList = function (item, event) {
$(ulGrowerList).closest('ul').find('a').removeClass('highlight');
$(ulGrowerList).closest('ul').find('.selected').remove();
$(event.target).toggleClass("highlight");
if ($(event.target).hasClass("highlight")) {
$(event.target).append("<span class='selected'>Selected</span>");
//console.log(event.target.id);
replaceByValue('GrowerID', event.target.id);
postjson();
//update GrowerInfo
$.getJSON("Grower/GetGrower", function (allData) {
self.GrowerName(allData.Name);
self.GrowerCompany(allData.CompanyName);
self.GrowerAddress(allData.Address);
self.ShowGrowerCompany(allData.ShowCompany);
self.GrowerID(allData.ID);
});
} else {
$(event.target).find(".selected").remove();
}
As you see, I am binding setSelectedClassToGrowerList to both and tags because a click on the text (span) was not taking the required actions. Now, the problem is, when I click on the text itself, the "Selected" text is not displayed. The functionality I'm looking for is similar to this:
http://jsfiddle.net/czqXm/1/ except for ability to select multiple items which is already working.
The more I am working with knockout and jquery mobile, the more I am leaning towards the conclusion that they are not the best combination (sigh!).

Answer 1

OK. I think this is a duplicate-handler problem.
What's happening is that when you click the text, because it has a separate click handler on the SPAN, inside the click-handler for the then in actual fact TWO click events are being registered......
The first makes "Selected" appear, and the second makes it disappear again.
I think you can probably simplify your binding to this
<li><a data-bind="click: $parent.setSelectedClassToGrowerList,
attr: {id: growerId},
text: growerName"></a></li>
...But take a look at this fiddle