Q:

Why delete function is not calling on clicking span tag appended in div

I am clicking value that is appended in div but delete function is not 
    calling Can anyone tell me where i am doing wrong
 $("#dropDown").change(function () {
        var value = $('#dropDown').val();
        $("#div").append('<span onclick="deleteValue()">'+value+'</span>');
     })

   function deleteValue()
    {
        alert("Delete function called."); 
    }

This is my HTML
<select id = "dropDown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<div id="div">
</div>

A:

You need to declare the script at the bottom of body as per the following code snippet to make the deleteValue() to work. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <select id="dropDown">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <div id="div">
  </div>
  <script>
    $("#dropDown").change(function() {
      var value = $('#dropDown').val();
      $("#div").append('<span onclick="deleteValue()">' + value + '</span>');
    });

    function deleteValue() {
      alert("Delete function called."); 
    }
  </script>
</body>

