title: How to click function for an auto built li list
body: <p>In my application, it parses data from an xml file and then show the data in a <code>&lt;li&gt;</code> list. 
  So there is a <code>&lt;ul&gt;</code> list and a loop for the xml file to put some specific data in each <code>&lt;li&gt;</code> tag.
  It successfully reads the xml file and creates the list, but the problem is that the list is kind of not active. For example, I made a <code>click</code> function so it gives <code>alert("done!");</code> when a <code>&lt;li&gt;</code> is clicked, but it is not working. </p>
  
  <p>Here is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var tracksArray = [];
  $.ajax({
    url: 'https://dl.dropboxusercontent.com/u/33538012/playlist.xml',
    dataType: "xml",
    success: parse,
    error: function() {
      alert("Error: Something went wrong");
    }
  });
  
  function parse(document) {
    $(document).find("track").each(function() {
      tracksArray.push($(this).find('url').text());
  
      $(".panel1 ul").append(
        "&lt;li id='row" + tracksArray.length + "'&gt;" +
        "&lt;p class='title'&gt;" + $(this).find('title').text() + "&lt;/p&gt;" +
        "&lt;/li&gt;"
      );
  
    });
  }
  
  
  $(".panel1 ul li").on("click", function() {
    alert("done!");
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.app {
    margin: 50px auto;
    width: 400px;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }
  div.app &gt; .blur {
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
  }
  div.mainSection,
  div.dashboard {
    position: absolute;
    left: 0px;
    text-align: center;
    color: #fff;
    font-size: 20px;
  }
  div.mainSection {
    width: 100%;
    height: 85%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
  }
  div.dashboard {
    width: 100%;
    height: 15%;
    background: rgba(255, 0, 0, 0.5);
    bottom: 0;
  }
  div.mainSection &gt; .panel1,
  div.mainSection &gt; .panel2,
  div.mainSection &gt; .panel3 {
    width: 100%;
    Height: 100%;
    Background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0px;
    top: 0px;
  }
  div.mainSection &gt; .panel3 &gt; p {
    margin-top: 80px;
  }
  .grid-button {
    background: none;
    border: none;
    padding: 3px;
    width: 100%;
  }
  .grid {
    display: inline-block;
    height: 4px;
    position: relative;
    width: 32px;
    transition: all 0.3s ease-in-out;
  }
  .grid:after,
  .grid:before {
    content: '';
    position: absolute;
    background-color: #FFF;
    display: inline-block;
    height: 4px;
    left: 0;
    width: 32px;
    transition: all 0.3s ease-in-out;
  }
  .grid.open {
    background-color: #FFF;
  }
  .grid.open:after {
    top: 10px;
  }
  .grid.open:before {
    top: -10px;
  }
  .grid.close {
    background-color: transparent;
    transform: scale(0.9);
  }
  .grid.close:after,
  .grid.close:before {
    top: 0;
    transform-origin: 50% 50%;
  }
  .grid.close:before {
    transform: rotate(135deg);
  }
  .grid.close:after {
    transform: rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="app"&gt;
    &lt;div class="blur"&gt;&lt;/div&gt;
    &lt;div class="mainSection"&gt;
      &lt;div class="panel1"&gt;
        &lt;ul&gt;&lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="panel2" style="display: none;"&gt;&lt;/div&gt;
      &lt;div class="panel3" style="display: none;"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dashboard"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, the last part of the my js code is for giving alert if a <code>&lt;li&gt;</code> is clicked, but nothing happens.</p>
  
  <p>Does anyone know why is that?</p>