0

任何人都可以让我知道为什么当我使用 Jquery mobile 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');
  });
});

为什么要捕获折叠和展开事件？

我没有准备好文档，而是尝试了 mobile 的所有页面事件。但没有运气。

4

1 回答 1

0

从您的小提琴中，我无法判断您使用的是哪个版本的 jQM。您已经检查了 1.3 版，但随后添加了 1.4 css。Assumin 1.4 版，我更新了你的小提琴：

小提琴

基本上，您需要使用事件委托来附加事件，因为在绑定时不存在可折叠项。此外，事件名称实际上是collapsibleexpand和collapsiblecollapse。

所以使用 on() 而不是 bind() 通过处理父 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 回答