Question

有人可以让我知道为什么以下代码在我使用Jquery mobile JS时不起作用

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

为什么崩溃和扩大甚至被捕获？

而不是文档准备我尝试了移动的页面事件。但没有运气。

Answer 1

从你的小提琴我不知道你正在使用哪个版本的jQM。您已检查版本1.3但随后添加了1.4 css。 Assumin版本1.4，我更新了你的小提琴：

FIDDLE

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

因此，通过处理父div上的事件并将其委托给现在存在或动态添加的类my-collapsible的所有项目，使用on（）而不是bind（）：

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

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

Jquery数据角色可折叠事件未在Jquery Mobile中捕获

1 个答案: