JQuery 根据元素在 HTML 中的位置，移动点击事件无法正常工作

Question

我正在尝试构建一个可折叠的网格，它会动态显示信息，当您单击每个折叠的网格时，它应该做一些事情来获取所需的数据，然后生成一些 HTML 代码并将其动态插入到该网格中。问题是，忽略 WS 调用和所有这些东西，当我进行简单测试以在 DIV 中插入一些简单的 HTML 代码时，我发现点击事件不起作用。在执行了几次测试之后，我发现只有当我将按钮放在 data-role="content" DIV 内但在 ddata-role="collapsible-set" [=22= 之外时，click 事件才会起作用].我不知道为什么，但这正是正在发生的事情。这是一个 fiddle，其中包含我文档正文的代码：

<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/

Answer 1

您可以使用折叠器 expand event 捕捉用户展开按钮的时间，而不是尝试添加按钮。

$(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

JQuery 根据元素在 HTML 中的位置，移动点击事件无法正常工作

JQuery Mobile click event not working depending on element location within HTML

html

javascript

jquery

jquery-mobile