0

Jquery モバイル JS を使用しているときに、次のコードが機能しない理由を教えてください。

http://jsfiddle.net/znz17ctm/7/ これは私のコードです

<div role="main" class="ui-content oms-content" id="dd">
    <div class="myactivelabelsWrap" id="result"></div>
</div>



var response = {
  "Restaurants": [{
    "RestrntArea": "Haii",
    "cust_loc_id": "374"
  }, {
    "RestrntArea": "rerrrwe",
    "cust_loc_id": "373"
  }]
}
showLabels();

function showLabels() {
  //$("#result").html("");
  var favoriteresultag = '';
  for (var i = 0; i < response.Restaurants.length; i++) {
    var name = response.Restaurants[i].RestrntArea;
    if (name) {
      favoriteresultag +=
        '<div data-role="collapsible" data-inset="false" class="my-collaspible"><h3>' +
        name +
        ' <a class="icon-pencil-1 labelEditIcon "></a></h3></div>';
    }
  }
  $("#result").append(favoriteresultag).trigger("create");
}
$(document).ready(function() {
  $('.my-collaspible').bind('expand', function() {
    alert('Expanded');
  });
  $('.my-collaspible').bind('collapse', function() {
    alert('Collapsed');
  });
});

折りたたむイベントと展開するイベントがキャプチャされるのはなぜですか??

ドキュメントの準備ができている代わりに、モバイルのすべてのページイベントを試しました。しかし運が悪い。

4

1 に答える 1

0

あなたのフィドルから、あなたが使用しているjQMのバージョンはわかりません。バージョン 1.3 を確認しましたが、1.4 css を追加しました。バージョン 1.4 を仮定すると、私はあなたのフィドルを更新しました:

フィドル

基本的に、バインド時に折りたたみ可能オブジェクトが存在しないため、イベント委任を使用してイベントをアタッチする必要があります。また、イベント名は実際にはcollapsibleexpandとcollapsiblecollapseです。

したがって、bind() の代わりに on() を使用して、親 div でイベントを処理し、現在存在するか動的に追加されたクラス my-collapsible を持つすべてのアイテムに委任します。

$("#result").on('collapsibleexpand', '.my-collaspible', function () {
    alert('Expanded');
});

$("#result").on('collapsiblecollapse', '.my-collaspible', function () {
    alert('Collapsed');
});
于 2015-01-30T14:07:43.530 に答える