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:
我正在尝试构建一个可折叠设置的网格,它可以动态显示信息,当您点击每个折叠的网格时,它应该做一些事情来获取所需的数据,然后生成一些HTML代码并在该网格中动态插入。问题是,忽略WS调用和所有这些东西,当我做一个简单的测试在DIV中插入一些简单的HTML代码时,我发现click事件不起作用。在执行了几次测试之后,我发现只有当我将按钮放在data-role =“content”DIV中但在ddata-role =“collapsible-set”DIV之外时,click事件才会起作用。我不知道为什么,但这正是发生的事情。这是我文档正文代码的小提琴:
<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>
https://jsfiddle.net/yaguarete79/nggtfLog/
1 个解决方案
#1
2
Instead of trying to add a button, you can use the collapsibles expand event to catch when the user expands it.
您可以使用collapsibles expand事件来捕获用户何时展开它,而不是尝试添加按钮。
$(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
#1
2
Instead of trying to add a button, you can use the collapsibles expand event to catch when the user expands it.
您可以使用collapsibles expand事件来捕获用户何时展开它,而不是尝试添加按钮。
$(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