Question

Been trying to put this into a function to make live calls, but can’t figure it out.

this works but only once:

<script>
$(document).ready(function(){

    $(".addFavorite").click(function(){
        var row = $(this);
        $.ajax({
            type: "POST",
            url: "/app/Favs/jsoncreate?id=<%= @place.ven_id %>&name=<%= @place.name %>",
            success: function(data){
                $(row).replaceWith('<div id="' + data + '" class="vFav vBtn deleteFavorite"><img src="/public/images/icons/favorite-.png" alt="Favorite -"></div>');
                }
        });
    });
    $('.deleteFavorite').click(function(){
        var id     = $(this).attr('id');
        var row = $(this);
        $.ajax({
                    type: "POST",
                    url: "/app/Favs/jsondelete?id=" + id,
                    async: true,
                    data: id,
                    success: function(data){
                        if (data == "1"){
                            $(row).replaceWith('<div class="vFav vBtn addFavorite"><img src="/public/images/icons/favorite.png" alt="Favorite"></div>');
                        }
                        if (data == "0"){
                            alert("Delete Failed!")
                        }

                    },
                    error: function(response){
                    alert('Favorite Delete FAILED!');
                    }
                });
    });
});
</script>

Answer 1

As others have noted, using .replaceWith() is removing any event handlers bound to that element.

Consider using .delegate() on a common parent of your elements.

<div id="someCommonParent">
  <div class="vFav vBtn addFavorite">
    <img src="/public/images/icons/favorite.png" alt="Favorite">
  </div>
</div>

$('#someCommonParent').delegate('.addFavorite', 'click', function () {
    var row = $(this);
    $.ajax({
        type: "POST",
        url: "/app/Favs/jsoncreate?id=<%= @place.ven_id %>&name=<%= @place.name %>",
        success: function (data) {
            $(row).replaceWith('<div id="' + data + '" class="vFav vBtn deleteFavorite"><img src="/public/images/icons/favorite-.png" alt="Favorite -"></div>');
        }
    });
}).delegate('.deleteFavorite', 'click', function () {
    var id = $(this).attr('id');
    var row = $(this);
    $.ajax({
        type: "POST",
        url: "/app/Favs/jsondelete?id=" + id,
        async: true,
        data: id,
        success: function (data) {
            if (data == "1") {
                $(row).replaceWith('<div class="vFav vBtn addFavorite"><img src="/public/images/icons/favorite.png" alt="Favorite"></div>');
            }
            if (data == "0") {
                alert("Delete Failed!")
            }

        },
        error: function (response) {
            alert('Favorite Delete FAILED!');
        }
    });
});