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>

我做错了什么？

UDATE

在阅读了您离开的文档后，我对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
});

无法选择/单击即时创建的元素

1 个答案: