jQuery Mobile單擊事件不起作用，具體取決於HTML中的元素位置
[英]JQuery Mobile click event not working depending on element location within HTML
問題描述
我正在嘗試構建一個可折疊的網格，該網格動態顯示信息，當您單擊每個折疊的網格時，它應該做一些事情以獲取所需的數據，然后生成一些HTML代碼並將其動態插入該網格中。 問題是，無視WS調用和所有其他內容，當我進行簡單的測試以在DIV中插入一些簡單的HTML代碼時，我發現click事件無法正常工作。 在執行了幾次測試之后，我發現只有將按鈕放在data-role =“ content” DIV中但在ddata-role =“ collapsible-set” DIV之外，單擊事件才會起作用。 我不知道為什么，但這就是正在發生的事情。 這是我文檔正文代碼的擺弄：
<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 個解決方案
解決方案1
2 已采納 2015-02-18 15:31:33
無需嘗試添加按鈕，您可以使用可折疊的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();
});
});
更新了FIDDLE
jQuery點擊事件不適用於移動設備
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.