jQuery Mobile单击事件不起作用，具体取决于HTML中的元素位置
[英]JQuery Mobile click event not working depending on element location within HTML
问题描述
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. 
我正在尝试构建一个可折叠的网格，该网格动态显示信息，当您单击每个折叠的网格时，它应该做一些事情以获取所需的数据，然后生成一些HTML代码并将其动态插入该网格中。 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. 问题是，无视WS调用和所有其他内容，当我进行简单的测试以在DIV中插入一些简单的HTML代码时，我发现click事件无法正常工作。 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. 在执行了几次测试之后，我发现只有将按钮放在data-role =“ content” DIV中但在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>
https://jsfiddle.net/yaguarete79/nggtfLog/ https://jsfiddle.net/yaguarete79/nggtfLog/
1 个解决方案
解决方案1
2 已采纳 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. 无需尝试添加按钮，您可以使用可折叠的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();
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.