Can't select/click elements created on the fly

Question

I need to build a DIV and inside write a UL with various LI based on AJAX results from PHP function. So I wrote this code:

$(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++;
                }
            }
        });
    });
});

When I call the page for first time this HTML code is built:

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

If I pick for example "Scanners" the AJAX call is made and I get this JSON as result:

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

So the same jQuery code should add a DIV element with new values and it does but:

Can't click/select the new elements created and can't find the cause of this behavior
The new created DIV is suppose to go after the <div id="cstep1" ... and not inside and it's not

This is the code generated after make the first AJAX call:

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

What I'm doing wrong?

UDATE

After read the docs you leave I made this changes to my jQuery code but still don't work:

$(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++;
                }
            }
        });
    });
});

`$("#cstep1").append` should be `$("#cstep1").after` if you want the new DIV after it, and not inside. — tymeJV, Aug 08 '13 at 14:24
For your other question, see [Event binding on dynamically created elements](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jason P, Aug 08 '13 at 14:25
This may help: http://stackoverflow.com/questions/17122485/how-to-bind-event-on-dynamic-generated-input-element-check-box/17127950#17127950 — Hashem Qolami, Aug 08 '13 at 14:25
@JasonP I check what you leave me and made changes according to that but still don't work, why? — Reynier, Aug 08 '13 at 14:41
to enable click event handler for new items use $('.SimpleSlideView-container').on('click', '.step', function(){...}); and instead of appending to the item append to the parent — Andrey, Aug 08 '13 at 14:43

score 2 · Accepted Answer · answered Aug 08 '13 at 14:42

2

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

answered Aug 08 '13 at 14:42

MDEV

10,240
1
29
49

Can't select/click elements created on the fly

1 Answers1