Search code examples
jqueryhtmlhtml-listsprepend

How to get the id value of an html <li> element added to an html <ul> element using prepend() method in jQuery ?

I would like to know How to get the id value of an html li element added to an html ul using prepend() method in jQuery. This is my code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="{{asset('bundles/moslemtest/phptest/bootstrap.min.css')}}"/>
    <script src="{{asset('bundles/moslemtest/phptest/jquery.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('bundles/moslemtest/phptest/bootstrap.min.js')}}" type="text/javascript"></script>
</head>
<body>
    <script src="{{asset('bundles/moslemtest/src/jquery.min.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            setTimeout( test2, 500);
            $(".dropdown-menu > li").click(function(){
                alert($(this).attr('id'));
            });
        });
        function test2(){
            var subject = 1;
    $.ajax({
    url: '{{asset('bundles/moslemtest/phptest/moslem3.php')}}',
        type: 'POST',
        data: {subject:subject},
        dataType: 'JSON',
        success: function(data1) {
                        var obj = JSON.parse(data1);
                        for (var i = 0; i < obj.length; i++) {
                            $(".dropdown-menu").prepend('<li id="'+obj[i].id+'">l\'utilisateur ayant l\'id: '+obj[i].actor+' '+obj[i].message+' l\'événement ayant l\'id: '+obj[i].object+'</li><hr>');
                        }
        }
    });
        }
    </script>
<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <input type="image"  id="notifications" alt="notifications" src="{{asset('bundles/moslemtest/phptest/notifications.jpg')}}"/>
        </button>
        <ul class="dropdown-menu" role="menu">
        </ul>
    </div>
</body>

When I click on any item of the menu (which is a Bootstrap menu) at the screenshot below nothing happens, despite It is expected that when I click on any item an alert windows appears containing the id attribute value of that item:

enter image description here

Although when I put the code below:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="{{asset('bundles/moslemtest/phptest/bootstrap.min.css')}}"/>
    <script src="{{asset('bundles/moslemtest/phptest/jquery.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('bundles/moslemtest/phptest/bootstrap.min.js')}}" type="text/javascript"></script>
</head>
<body>
    <script src="{{asset('bundles/moslemtest/src/jquery.min.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".dropdown-menu > li").click(function(){
                alert($(this).attr('id'));
            });
        });
    </script>
<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <input type="image"  id="notifications" alt="notifications" src="{{asset('bundles/moslemtest/phptest/notifications.jpg')}}"/>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li id="1">good morning</li><hr>
            <li id="2">hello</li><hr>
            <li id="3">hi</li><hr>
            <li id="4">welcome</li><hr>
        </ul>
    </div>
</body>

Then I click on any item of the menu, an alert windows appears containing its id attribute value as you can see at the screenshot below:

enter image description here

It is obvious that there is a problem with the HTML li elements which are added to the HTML ul element using the prepend() method. So, my question is how can I resolve that?? I really need to use the prepend() method.

Thanks in advance

Solution

  • Use delegated on attached to the nearest non-changing ancestor of the elements:

    e.g.

    $('.dropdown-menu').on('click', 'li', function(){
    alert($(this).attr('id'));
});

    This listens for 'click' bubbling up from any children of .dropdown-menu, then it applies the li selector, then it calls the supplied function for any matching element that caused the event.

    The general case, if you don't have a specific ancestor, is to use document as the place to listen:

    $(document).on('click', '.dropdown-menu li', function(){
    alert($(this).attr('id'));
});

    Do not use body as it has some weird behavior.