help with ajax only working once

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开发者_如何学Python.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>

---

When you create a new element with ajax, you need to bind the click event again. Using the first one as example:

$(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').bind('click', deleteFavorite());
                }
        });
    });
});

function deleteFavorite() {
    .deleteFavorite click action here
}

---

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!');
        }
    });
});

---

The problem is that when you call replaceWith, you remove the current row and all its event handlers. If you change:

$(".addFavorite").click(function(){

to

$(".addFavorite").live('click', function(){

then you'll probably get what you want.

The reason this happens is because when you call .click, you bind the handler only to those elements which match the selector at the time of the call. Any elements added later don't get that handler. .live basically means that jQuery checks for matching elements when the event is triggered.