当函数innerHTML被调用时，jquery不起作用

Question

我希望使用innerHTML添加更多功能但我刚刚意识到当我调用添加更多功能时我的jquery不起作用。这是我的代码：

<div id="col">
<button class="confirm" style="width: 146px;margin-top:6px;">
    <i class="pr10 mr5" style="border-right: 1px solid #fff"></i>
    Buy
</button>
</div>
<div id="a"></div>
<a onclick="javascript:a()">a</a>
<script>
function a(){
document.getElementById("a").innerHTML += '<div class="col"><button class="confirm"     style="width: 146px;margin-top:6px;"><i class="pr10 mr5" style="border-right: 1px solid  #fff"></i>Buy</button></div>'; 
}
$(".confirm").click(function ()
{
alert("a");    
})
</script>

jquery只在第一个按钮上工作。有人知道我的错误吗？谢谢。

Answer 1

创建页面后，您的按钮尚不存在，因此此元素无法使用所有事件，在这种情况下，您需要使用 event delegation 附加这些事件例如在你的情况下点击这个新添加的按钮：

$('#a').on('click',".confirm",function () {
    alert("a");    
})

另一方面是使用.click()事件处理程序而不是内联onClick事件，因为您正在使用jQuery。