I am trying to dynamically populate and set collapse/expand handlers for a collapsible list in jQuery Mobile. The expand handler is working as expected but the collapse handler triggers once for every item on the list when an element is expanded.
<head>
<link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.css?gfd" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
</head>
<script>
$(document).ready(function () {
for (var i = 0; i < 4; i++) {
var element = $("#listElementTemplate").clone();
element.find('h3').append("list Element: " + i);
$("#list").append(element);
element.on('expand', function () {
alert("expand: "+i);
});
element.collapsible();
element.on('collapse', function () {
alert("collapse: "+i);
});
}
});
</script>
<body>
<div id='listElementTemplate' data-role="collapsible" data-collapsed='true'>
<h3 class='chart-elem-data'>
</h3>
<p id=''>Content</p>
</div>
<div data-role="page" class="type-interior">
<div data-content-theme="c" id="list" data-role="collapsible-set"></div>
</div>
</body>
I'm not crazy about this solution but what I've done is created a unique name attribute for each list element, then on the expand event I set a variable equal to the unique name attribute of the expanded element. Then I use condition logic in the collapse handler so code only fires if the name of the collapsing element is equal to that of the previously expanded element.
It's not pretty but it seems to work.
$(document).ready(function () {
//Create element name variable
var elementName;
for (var i = 0; i < 4; i++) {
(function (i) {
var element = $("#listElementTemplate").clone();
//Use index to create unique name attribute
element.attr("name",count);
element.find('h3').append("list Element: " + i);
$("#list").append(element);
element.on('expand', function () {
//On expand set element name to name of expanded element
elementName = $(this).attr("name");
});
element.collapsible();
element.on('collapse', function(){
//Use conditional logic only trigger code on the previously expanded element
if (elementName == $(this).attr("name")){
//code to execute
}else{
//Leave empty
}
});
}
});