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