Question

因为我正在动态生成我的内容，并且在脚本执行之前它不存在于文档中，所以普通元素选择器不适用。

<div class="list">
    //generated elements within here
    <p data-key="0" >List Item 1</p>
    <p data-key="1">List Item 2</p>
    //generated elements within here
</div>

所以这不起作用（请注意，这与上面的名称相同，只是使用不同的名称）：

Category = 0;

$(".list > p").click(function(){
    var thisKey = $(this).data("key");
    for (var i = 0; i < ServiceArray[Category][thisKey][2][1][1].length; i++) {

        var listId = ServiceArray[Category][thisKey][2][1][i][2];
        var listTitle = ServiceArray[Category][thisKey][2][1][i][0];
        var List = "";

        for (var x = 0; x < ServiceArray[Category][thisKey][2][1][i][2].length; x++) {
            var Time = ServiceArray[Category][thisKey][2][1][i][2][x][3];
            var Content = ServiceArray[Category][thisKey][2][1][i][2][x][0];
            var Hours = ServiceArray[Category][thisKey][2][1][i][2][x][4];
            List += '<div class="li"><div class="selection"></div><p data-time="' + Time + '">' + Content + '<span class="orange"> ('+ Hours +'Hrs)</span></p></div>';
        }

        $(".layer4").append('<div id="' + listId + '" class="listContainer"><h2>' + listTitle + '</h2><div class="ListWrapper">' + List + '</div></div>');
    }
});

相反，我必须使用

$(".dropdown-service").on("click" ,"p",function () {
    //all the stuff up there, in here, except in here, I can't use $(this).data("key") to get my array keys.
});

那么如何在功能中选择要使用其附加数据的元素呢？

请记住，$（“。list＆gt; p”）将无法成功选择元素，因为直到加载文档后才会生成它。我还没有完全理解这一点，但在前一个问题中，它被解释为问题;这是次要问题，源于该问题的解决方案。

Here is that question。

这是JSFiddle。

事件委托 - 动态生成的内容

0 个答案: