JQuery Mobile click event not working depending on element location within HTML
Question
I'm trying to build a collapsible-set grid, which shows information dynamically, as you click on each collapsed grid, it should do some stuff to get the desired data, then generate some HTML code and insert it dynamically within that grid. The problem is, disregarding WS calls and all that stuff, when I make a simple test to insert some simple HTML code within that DIV, I discovered click event is not working. After performing several tests, I found click event will work only if I place the button within the data-role="content" DIV, but outside the ddata-role="collapsible-set" DIV. I don't know why but that's exactly what's happening. Here's a fiddle with the code for my document's body:
<body>
<div data-role="page" id="home">
<div data-role="content">
<a href="#" data-role="button" id="btnPrueba">Test button</a>
<div data-role="collapsible-set" id="setAllCategory" data-content-theme="d">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
id="setCategory1">
<h1><label>Food</label>
<a data-role="button" id="btnAddSubCat1" name="btnAddSubCat1" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
<div id="setCategoryContent1"></div>
</div>
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
id="setCategory2">
<h1><label>Dress</label>
<a data-role="button" id="btnAddSubCat2" name="btnAddSubCat2" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
</div>
</div>
</div>
</body>
1 answers
solution1
2 ACCPTED 2015-02-18 15:31:33
Instead of trying to add a button, you can use the collapsibles expand event to catch when the user expands it.
$(document).on("pagecreate", "#home", function () {
var subCatObject = '<div class="ui-grid-b">';
subCatObject += '<div class="ui-block-a"><label>Hi</label></div>';
subCatObject += '<div class="ui-block-b"><a href="#" data-role="button" data-iconpos="notext" data-icon="edit"></a></div>';
subCatObject += '<div class="ui-block-c"><a href="#" data-role="button" data-iconpos="notext" data-icon="delete"></a></div>';
subCatObject += '</div>';
$("#setCategory1").on("collapsibleexpand", function (event, ui) {
$("#setCategoryContent1").html(subCatObject).enhanceWithin();
});
});
Updated FIDDLE
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.