title: How to get the id value of an html <li> element added to an html <ul> element using prepend() method in jQuery ?
body: <p>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:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;{{asset('bundles/moslemtest/phptest/bootstrap.min.css')}}&quot;/&gt;
      &lt;script src=&quot;{{asset('bundles/moslemtest/phptest/jquery.min.js')}}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;{{asset('bundles/moslemtest/phptest/bootstrap.min.js')}}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src=&quot;{{asset('bundles/moslemtest/src/jquery.min.js')}}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          $(document).ready(function() {
              setTimeout( test2, 500);
              $(&quot;.dropdown-menu &gt; li&quot;).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 &lt; obj.length; i++) {
                              $(&quot;.dropdown-menu&quot;).prepend('&lt;li id=&quot;'+obj[i].id+'&quot;&gt;l\'utilisateur ayant l\'id: '+obj[i].actor+' '+obj[i].message+' l\'événement ayant l\'id: '+obj[i].object+'&lt;/li&gt;&lt;hr&gt;');
                          }
          }
      });
          }
      &lt;/script&gt;
  &lt;div class=&quot;btn-group&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-default dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
              &lt;input type=&quot;image&quot;  id=&quot;notifications&quot; alt=&quot;notifications&quot; src=&quot;{{asset('bundles/moslemtest/phptest/notifications.jpg')}}&quot;/&gt;
          &lt;/button&gt;
          &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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:</p>
  <p><img src="https://i.stack.imgur.com/WytB3.jpg" alt="enter image description here" /></p>
  <p>Although when I put the code below:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;{{asset('bundles/moslemtest/phptest/bootstrap.min.css')}}&quot;/&gt;
      &lt;script src=&quot;{{asset('bundles/moslemtest/phptest/jquery.min.js')}}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;{{asset('bundles/moslemtest/phptest/bootstrap.min.js')}}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src=&quot;{{asset('bundles/moslemtest/src/jquery.min.js')}}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          $(document).ready(function() {
              $(&quot;.dropdown-menu &gt; li&quot;).click(function(){
                  alert($(this).attr('id'));
              });
          });
      &lt;/script&gt;
  &lt;div class=&quot;btn-group&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-default dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
              &lt;input type=&quot;image&quot;  id=&quot;notifications&quot; alt=&quot;notifications&quot; src=&quot;{{asset('bundles/moslemtest/phptest/notifications.jpg')}}&quot;/&gt;
          &lt;/button&gt;
          &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
              &lt;li id=&quot;1&quot;&gt;good morning&lt;/li&gt;&lt;hr&gt;
              &lt;li id=&quot;2&quot;&gt;hello&lt;/li&gt;&lt;hr&gt;
              &lt;li id=&quot;3&quot;&gt;hi&lt;/li&gt;&lt;hr&gt;
              &lt;li id=&quot;4&quot;&gt;welcome&lt;/li&gt;&lt;hr&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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:</p>
  <p><img src="https://i.stack.imgur.com/VvnXa.jpg" alt="enter image description here" /></p>
  <p>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.</p>
  <p>Thanks in advance</p>