如何使用 jquery 函数中添加的代码中的类

Question

我用 jquery 创建 html 代码。

<span id="myspan">aa</span>
<input id="btn" type="button" value="click">

现在我想调用一个点击代码类创建的函数

function loadSpan()
{
var _html = "<a class=\"addItem\">test</a>";
$('#myspan').html(_html);
}
$(function(){
$('#btn').click(function(){
loadSpan();
});
$('.addItem').click(function(){
alert("OK");
});
})

但不工作。我测试这段代码，并工作：

$(function(){
loadSpan();
});

但是我想在点击按钮后生成代码

测试代码

Answer 1

在

span

元素上使用事件委托来处理动态创建的元素上的事件。

function loadSpan() {
  var _html = "<a class=\"addItem\">test</a>";
  $('#myspan').html(_html);
}
$('#btn').click(function() {
  loadSpan();
});
$('#myspan').on('click', '.addItem', function() {
  console.log("OK");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="myspan">aa</span>
<input id="btn" type="button" value="click">