무한 스크롤 추가 된 div에서 클릭시 이미지 변경 적용이 안됩니다

var page = 2;

$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        console.log(++page);
        $("#contents").append("    <div class=\"texts\">\n" +
            "                    <div class=\"texthead\"><p>글"+page+"</p></div>\n" +
            "                    <div class=\"textcon\"></div>\n" +
            "                    <div class=\"textfoot\">\n" +
            "                        <img class='heart' src=\"heart.png\" alt=\"\">\n" +
            "                </div>"); 
    }
    //무한스크롤
});
    $(".heart").on({'click': function () {
        var src = ($(this).attr('src') === 'heart2.png'
            ) ? 'heart.png'
            : 'heart2.png';
            $(this).attr('src', src);
       }
    });

//이미지 변경

여기서 글은 처음 써보는거라 잘 모르겠어서 그냥 코드 다 가져왔는데 어떻게 해야 할까요 ㅜㅜ