[jQuery]Ajax產生之html dom的事件綁定

jQuery 1.7版本以上，若希望綁定Ajax產生之html dom的事件綁定
可使用on方法
(詳細可參考http://api.jquery.com/on/)
1.7版以前的live等方法，已經不適用了。

圖片來源Designed by Freepik

---

如果網頁Load後，已經產生的html dom（如下），
<div class="heart" id="id1234"></div>
直覺都會用以下的程式碼來綁定事件。
$(".heart").click(function() {
    console.log($(this).attr("id"));
});
但是如果這是由Ajax動態產生的html dom（如下），
<div class="container" id="ListDiv">
    <!--↓↓↓↓↓由Ajax動態產生↓↓↓↓↓-->
    <div class="heart" id="data1234"></div>
    <!--↑↑↑↑↑↑↑↑↑↑-->
</div>

是無法用上述的寫法綁定事件。
這時候就可以使用on方法來綁定事件。 $("#ListDiv").on("click", ".heart", function (event) {
    console.log($(this).attr("id"));
});