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

Question

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>

Have you defined `deleteValue` function in global scope? Better use Event delegation for dynamic elements — Satpal, Jun 13 '18 at 07:30
Is `deleteValue` declared at the root level? In any case you should stop using inline event handlers. Just use `$("").text(value).click(deleteValue).appendTo("#div")` — Denys Séguret, Jun 13 '18 at 07:30
Can you show your HTML? Because you are appending your value to `div whose id is div` like this `
` — Talk2Nit, Jun 13 '18 at 07:33

4b0 · Answer 1 · 2018-06-13T08:45:25.507

Use trigger for this and use html instead of append to prevent fire element multi pal times.

$("#dropDown").off().on('change', function(e) {
  var value = $('#dropDown').val();
  $("#div").html('<span onclick="deleteValue()">' + value + '</span>');
  $('#div').find('span').trigger('click');
});
function deleteValue() {
  console.log("Delete function called.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

score 0 · Accepted Answer · answered Jun 13 '18 at 09:08

0

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>

answered Jun 13 '18 at 09:08

John R

2,741
2
13
32

Thank you John R It's working, Can u explain how it is different writing script after the body? – karun Jun 13 '18 at 11:25
@karun For JavaScript events you need define the JavaScript functions either in the head section or at the bottom of body section. To enable both the jQuery events and JavaScript events, you need to define at the bottom of body. [Additional Information](https://stackoverflow.com/questions/30653081/why-scripts-at-the-end-of-body-tag) – John R Jun 13 '18 at 12:51

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

2 Answers2