html - 无法选择/单击动态创建的元素

Question

我需要构建一个DIV并在内部编写一个基于 PHP 函数的 AJAX 结果的UL各种。LI所以我写了这段代码：

$(function() {
    $('#categories-picker').simpleSlideView({duration: 250});

    $(".step").click(function() {
        var id = $(this).attr('data-id');
        $.ajax({
            type: 'GET',
            url: Routing.generate('category_subcategories', {parent_id: id}),
            dataType: "json",
            success: function(data) {
                var k = 2;
                if (data.length != 0) {
                    $("#cstep1").append('<div class="view" id="cstep' + k + '"><ul id="step' + k + '"></ul></div>');

                    var LIs = "";
                    $.each(data, function(index, value) {
                        $.each(value, function(i, v) {
                            LIs += '<li><a class="step" data-id="' + i + '" href="#">' + v + '</a></li>';
                        })
                    });

                    $('#cstep' + k).html(LIs);
                    k++;
                }
            }
        });
    });
});

当我第一次调用该页面时，会构建此 HTML 代码：

<div id="categories-picker" class="SimpleSlideView-container">
    <div id="cstep1" class="view SimpleSlideView-view SimpleSlideView-view-active">
        <h2>Seleccione una categoría</h2>
        <ul class="circle" id="step1">
            <li><a data-id="1" class="step" href="#">Monitors</a></li>
            <li><a data-id="2" class="step" href="#">Cameras</a></li>
            <li><a data-id="4" class="step" href="#">Scanners</a></li>
            <li><a data-id="5" class="step" href="#">Printers</a></li>
            <li><a data-id="6" class="step" href="#">Mice and Trackballs</a></li>
            <li><a data-id="7" class="step" href="#">Mac</a></li>
            <li><a data-id="8" class="step" href="#">PC</a></li>
            <li><a data-id="9" class="step" href="#">Software</a></li>
            <li><a data-id="10" class="step" href="#">Components</a></li>
            <li><a data-id="11" class="step" href="#">Phones &amp;amp; PDAs</a></li>
            <li><a data-id="12" class="step" href="#">Desktops</a></li>
            <li><a data-id="13" class="step" href="#">MP3 Players</a></li>
            <li><a data-id="14" class="step" href="#">Laptops &amp;amp; Notebooks</a></li>
            <li><a data-id="15" class="step" href="#">Windows</a></li>
            <li><a data-id="16" class="step" href="#">Macs</a></li>
            <li><a data-id="17" class="step" href="#">Tablets</a></li>
        </ul>
        <ul class="view-nav clearfix">
            <li class="view-nav-contents pull-left"><a data-popview="" href="#nav">Previous</a></li>
            <li class="view-nav-next pull-right"><a data-pushview="" href="#how">Next</a></li>
        </ul>
    </div>
</div>

如果我选择例如“扫描仪”，则会进行 AJAX 调用，我得到这个 JSON 作为结果：

[{"27":"Test10"},{"28":"Test11"},{"29":"Test12"}]

因此，相同的 jQuery 代码应该添加一个DIV具有新值的元素，但它确实：

• 无法单击/选择创建的新元素，也无法找到此行为的原因
• 新创建DIV的应该是追求<div id="cstep1" ...而不是在里面，它不是

这是进行第一次 AJAX 调用后生成的代码：

<div id="cstep1" class="view SimpleSlideView-view SimpleSlideView-view-active">
    <h2>Seleccione una categoría</h2>
    <ul class="circle" id="step1">
        <li><a data-id="1" class="step" href="#">Monitors</a></li>
        <li><a data-id="2" class="step" href="#">Cameras</a></li>
        <li><a data-id="4" class="step" href="#">Scanners</a></li>
        <li><a data-id="5" class="step" href="#">Printers</a></li>
        <li><a data-id="6" class="step" href="#">Mice and Trackballs</a></li>
        <li><a data-id="7" class="step" href="#">Mac</a></li>
        <li><a data-id="8" class="step" href="#">PC</a></li>
        <li><a data-id="9" class="step" href="#">Software</a></li>
        <li><a data-id="10" class="step" href="#">Components</a></li>
        <li><a data-id="11" class="step" href="#">Phones &amp;amp; PDAs</a></li>
        <li><a data-id="12" class="step" href="#">Desktops</a></li>
        <li><a data-id="13" class="step" href="#">MP3 Players</a></li>
        <li><a data-id="14" class="step" href="#">Laptops &amp;amp; Notebooks</a></li>
        <li><a data-id="15" class="step" href="#">Windows</a></li>
        <li><a data-id="16" class="step" href="#">Macs</a></li>
        <li><a data-id="17" class="step" href="#">Tablets</a></li>
    </ul>   
    <ul class="view-nav clearfix">
        <li class="view-nav-contents pull-left"><a data-popview="" href="#nav">Previous</a></li>
        <li class="view-nav-next pull-right"><a data-pushview="" href="#how">Next</a></li>
    </ul>
    <div id="cstep2" class="view">
        <ul id="step2">
            <li><a href="#" data-id="27" class="step">Test10</a></li>
            <li><a href="#" data-id="28" class="step">Test11</a></li>
            <li><a href="#" data-id="29" class="step">Test12</a></li>
        </ul>
    </div>
</div>

我做错了什么？

日期

阅读您留下的文档后，我对我的 jQuery 代码进行了这些更改，但仍然无法正常工作：

$(function() {
    $('#categories-picker').simpleSlideView({duration: 250});

    $("a.step").on("click", function() {
        var id = $(this).attr('data-id');
        $.ajax({
            type: 'GET',
            url: Routing.generate('category_subcategories', {parent_id: id}),
            dataType: "json",
            success: function(data) {
                var k = 2;
                if (data.length != 0) {
                    $("#cstep1").after('<div class="view" id="cstep' + k + '"><ul id="step' + k + '"></ul></div>');

                    var LIs = "";
                    $.each(data, function(index, value) {
                        $.each(value, function(i, v) {
                            LIs += '<li><a class="step" data-id="' + i + '" href="#">' + v + '</a></li>';
                        })
                    });

                    $('#step' + k).html(LIs);
                    k++;
                }
            }
        });
    });
});

Answer 1

$("#categories-picker").on("click",".step",function(e) {
    //code
});