Jquery数据角色可折叠事件未在Jquery Mobile中捕获 [英] Jquery data-role collapsible events aren't being captured in Jquery Mobile

问题描述

有人可以让我知道为什么当我与Jquery移动JS一起使用时以下代码为什么不起作用

Could anybody please let me know why the following code isn't working when i am using with 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');
  });
});

为什么塌陷和膨胀甚至被捕获?

Why the collapse and expand even'ts are being captured ??

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

Instead of document ready i tried with al the page events of mobile . But no luck .

推荐答案

从您的小提琴中，我无法确定您使用的是哪个版本的jQM.您已经检查了版本1.3，然后添加了1.4 CSS.假设是1.4版，我已经更新了您的小提琴:

From your fiddle I can't tell which version of jQM you are using. You have checked version 1.3 but then added the 1.4 css. Assumin version 1.4, I have updated your fiddle:

FIDDLE

基本上，您需要使用 事件委托 附加事件，因为在绑定时不存在可折叠对象.事件名称实际上也是 collapsibleexpand 和 collapsiblecollapse .

Basically, you need to use event delegation to attach the events because the collapsibles do not exist at the time of the bind. Also the event names are actually collapsibleexpand and collapsiblecollapse.

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

So use on() instead of bind() by handling the event on the parent div and delegating it to all items with class my-collapsible that exist now or added dynamically:

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

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

这篇关于Jquery数据角色可折叠事件未在Jquery Mobile中捕获的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！