Javascript 为什么删除函数在单击附加在div中的span标记时不调用

我正在单击附加在div中的值，但删除函数不是 有人能告诉我哪里做错了吗

 $("#dropDown").change(function () {
        var value = $('#dropDown').val();
        $("#div").append('<span onclick="deleteValue()">'+value+'</span>');
     })

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

$（“#下拉列表”）.change（函数（）{
var值=$（“#下拉列表”）.val（）；
$（“#div”）。追加（“”+value+“”）；
})
函数deleteValue（）
{
警报（“删除调用的函数”）；
}

这是我的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>

沃尔沃汽车
萨博
欧宝
奥迪

为此使用

触发器

，并使用

html

而不是

append

来防止多次触发元素

$（“#下拉”）.off（）.on（'change'，函数（e）{
var值=$（“#下拉列表”）.val（）；
$（“#div”）.html（“”+value+“”）；
$（'#div'）。查找（'span'）。触发（'click'）；
});
函数deleteValue（）{
log（“删除调用的函数”）；
}

沃尔沃汽车
萨博
欧宝
奥迪

您需要根据以下代码片段声明

正文底部的
脚本
，以使
deleteValue（）
正常工作



沃尔沃汽车
萨博
欧宝
奥迪
$（“#下拉列表”）.change（函数（）{
var值=$（“#下拉列表”）.val（）；
$（“#div”）。追加（“”+value+“”）；
});
函数deleteValue（）{
警报（“删除调用的函数”）；
}
您是否在全局范围内定义了
deleteValue
函数？更好地使用动态元素的事件委派是在根级别声明的
deleteValue
？在任何情况下，都应该停止使用内联事件处理程序。只需使用
$（“”）。文本（值）。单击（删除值）。附加到（“#div”）
可以显示HTML吗？因为您将值添加到id为div的div中，就像这样
谢谢John R它正在工作，您能解释一下在主体之后编写脚本有什么不同吗？@karun对于JavaScript事件，您需要在主体部分的头部或底部定义JavaScript函数。要同时启用jQuery事件和JavaScript事件，需要在正文底部定义。