Сворачиваемые события роли данных Jquery не фиксируются в Jquery Mobile

Может кто-нибудь, пожалуйста, дайте мне знать, почему следующий код не работает, когда я использую 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');
  });
});

Почему фиксируются события коллапса и расширения ??

Вместо готового документа я пробовал использовать все события страницы мобильного телефона. Но не повезло.


jquery-mobile jquery-mobile-collapsible
person Pawan    schedule 30.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Из вашей скрипки я не могу сказать, какую версию jQM вы используете. Вы проверили версию 1.3, но затем добавили 1.4 css. Предполагая версию 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');
});
person ezanker    schedule 30.01.2015
comment
Я решил это так: $(#result).append(favoriteresultag).trigger(create).trigger('pagecreate'); а затем $(document).on(pagecreate, function() { $('.my-collaspible').on('collapsibleexpand', function () { alert('Expanded'); }); $('. my-collaspible').on('collapsiblecollapse', function () { alert('Collapsed'); }); - person Pawan; 30.01.2015
comment
@PreethiJain, в версии 1.4 вы можете использоватьEnhanceWithin() вместо trigger(create), и мое решение может иметь лучшую производительность, поскольку оно не требует воссоздания всей страницы каждый раз, когда вы добавляете элементы... - person ezanker; 30.01.2015