After JS append a
in existing
, i cannot selected it with click event

Question

I have a dropdown list (Bootstrap), after selected an element in this dropdown list, i call a php file with ajax to load a specific content for a new dropdown list.

In my JS script i append the result i found in a existing ul list.

My problem is after append new li element in my ul list #submitPoint, i cannot select them with selector from js. I don't know why but JS seem to not see the new elements he just append before..

Here the PhP code with 2 dropdown list, one for flow name, other one for flow's submit point:

print "<div class='row'>" ;
print "<div id='flowsPane' class='col-sm-6' style='display: true;'>" ;
print "<div class='btn-group'>" ;
print "<a id='dropdownText1' class='btn btn-default dropdown-toggle btn-select' data-toggle='dropdown' href='#'>Select a Flow <span class='caret'></span></a>" ;
print("<ul id='flows' class='dropdown-menu'>");
foreach ($flows as $flow) {
    print("<li id='" . $flow . "'>" . $client->getNameOfFlow($flow) . "</li>");
}
print "</ul>" ;
print "</div>" ;
print "</div>" ;
print "<div id='submitPointPane' class='col-sm-6' style='display: none;'>" ;
print "<div class='btn-group'>" ;
print "<a id='dropdownText2' class='btn btn-default dropdown-toggle btn-select' data-toggle='dropdown' href='#'>Select a SubmitPoint <span class='caret'></span></a>" ;
print("<ul id='submitPoint' class='dropdown-menu'>");

Here the JS code :

<script type="text/javascript">
    $(document).ready(function() {
        $("#flows li ").click(function(e){
            var flow = $(this).text();
            //window.alert(flow);
            document.getElementById('dropdownText1').innerHTML = flow + ' <span class="caret"></span>';
        });

        $('#flows li').click(function(e) {
            $("#submitPointPane").show();
            //window.alert(e.target.id);
            var post_url = "include/submitpoint_list.php";
            $.ajax({
                type: 'POST',
                url: post_url,
                data: {'flowId': e.target.id},
                dataType: 'json ',
                success: function(data) {
                    $("#submitPoint").empty();
                    var ite = 0;
                    while (ite < data.length) {
                        $("#submitPoint").append("<li>" + data[ite] + "</li>");
                        //document.getElementById('submitPoint').innerHTML = "<li>" + data[ite] + "</li>";
                        ite++;
                    }
                    return false;
                },
                error: function(xhr, status, error) {
                    window.alert("error " + xhr.responseText);
                }
            });
            //return false;
        });
        $("#submitPoint li").click(function(e){
            var sp = $(this).text();
            window.alert(sp);
            document.getElementById('dropdownText2').innerHTML = sp + ' <span class="caret"></span>';
        });
    });
</script>

So after append li element in ul #submitPoint, if I click on it, the #submitPoint li click function is never call, but the li element appear in my list.... (Sorry I cannot add picture)

Do you have any ideas that can help me to the question why the JQuery selector does not work properly for the new li element append? Thanks for all!

I would be helpful if you have provided the HTML output, not the PHP source code. — halfzebra, Jul 13 '15 at 17:49

score 0 · Answer 1 · answered Jul 13 '15 at 17:52

0

You can use jQuery's .on() method to bind event listeners to elements that exist now and in the future. http://api.jquery.com/on/

answered Jul 13 '15 at 17:52

Dog

2,230
21
26

score 0 · Accepted Answer · answered Jul 13 '15 at 17:53

0

The issue that you're experiencing is caused by the simple fact, that your dynamically created <li> item doesn't have an even listener for click event attached.

What you need is to use .on() method, to attach an event listener fod dynamically created elements.

// The event listener is being applied to the parent.
$('#flows').on('click', 'li', callback);

answered Jul 13 '15 at 17:53

halfzebra

6,340
4
29
45

when you write callback, you mean => $("#submitPoint li").on('click', 'li', function(e){ var sp = $(this).text(); window.alert(sp); document.getElementById('dropdownText2').innerHTML = sp + ' '; }); – Champin Néault Florian Jul 13 '15 at 18:00
@ChampinNéaultFlorian yes, that's right. – halfzebra Jul 13 '15 at 18:03
Guys You are awesome, thank to you, i have been in trouble for hours, and you solve this in 10 minutes, thanks ! Everything work properly now ! :D – Champin Néault Florian Jul 13 '15 at 18:05

After JS append a in existing , i cannot selected it with click event

2 Answers2

After JS append a
in existing
, i cannot selected it with click event