0

私は次のようなリストビューを持っています：

               <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>

私のsetSelectedClassToGrowerListは次のようになります。

    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();
    }

ご覧のとおり、テキスト（スパン）をクリックしても必要なアクションが実行されなかったため、setSelectedClassToGrowerListをタグとタグの両方にバインドしています。問題は、テキスト自体をクリックしても、「選択した」テキストが表示されないことです。私が探している機能は次のようなものです：http： //jsfiddle.net/czqXm/1/すでに機能している複数のアイテムを選択する機能を除いて、

私がノックアウトとjquerymobileを使用するほど、それらは最良の組み合わせではないという結論に傾いています（ため息をつく！）。

4

1 に答える 1

2

わかった。これは重複ハンドラーの問題だと思います。

何が起こっているのかというと、テキストをクリックすると、SPAN上に個別のクリックハンドラーがあるため、クリックハンドラー内に実際には2つのクリックイベントが登録されています......最初のイベントは「選択済み」になりますが表示され、2番目は再び消えます。

おそらくこれへのバインドを単純化できると思います

<li><a data-bind="click: $parent.setSelectedClassToGrowerList, 
                  attr: {id: growerId}, 
                  text: growerName"></a></li>

...しかし、このフィドルを見てください

于 2012-09-28T13:29:10.717 に答える