関数のinnerHTMLが呼び出されたときにjqueryが機能しない - jquery

作りたい さらに追加 との機能 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は最初のボタンでのみ機能します。誰でも私の間違いを知っていますか？

回答：

ページが作成されたとき、ボタンはまだ存在しないため、この要素ではすべてのイベントを利用できません。この場合は、使用する必要があります イベント委任 ケース内のクリックなどのイベントをこの新しく追加されたボタンに添付するには：

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

別のサイドノートは使用することです .click() インラインではなくイベントハンドラ onClick jQueryを使用しているため、イベント。

ある要素にクリックハンドラーを追加する動的にロードされる場合、親オブジェクト（動的にロードされないアンカー）にイベントハンドラーを設定し、次のコードのように動的オブジェクトに一致するセレクターを与える必要があります。

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