当调用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

当页面创建时，您的按钮还不存在，所以所有事件将无法用于该元素，在这种情况下，您需要使用事件委托将这些事件附加到这个新添加的按钮上，例如在您的情况下单击:

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

另一个边注是使用.click()事件处理程序而不是内联onClick事件，因为你正在使用jQuery

Answer 2

为一个动态加载的元素添加一个click处理程序，你应该在父对象(不是动态加载的锚)上设置事件处理程序，并给它一个与你的动态对象匹配的选择器，就像下面的代码:

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