Jquery 帮助ajax只工作一次

我一直在尝试将其放入一个函数中以进行实时调用，但无法解决

这只起作用一次：

<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>

$（文档）.ready（函数（）{
$（“.addFavorite”）。单击（函数（）{
var行=$（此）；
$.ajax({
类型：“POST”，
url:“/app/Favs/jsoncreate？id=&name=”，
成功：功能（数据）{
$（行）。替换为（“”）；
}
});
});
$（'.deleteFavorite'）。单击（函数（）{
var id=$（this.attr（'id'）；
var行=$（此）；
$.ajax({
类型：“POST”，
url:“/app/Favs/jsondelete？id=“+id，
async:true，
数据：id，
成功：功能（数据）{
如果（数据==“1”）{
$（行）。替换为（“”）；
}
如果（数据=“0”）{
警报（“删除失败！”）
}
},
错误：函数（响应）{
警报（“收藏夹删除失败！”）；
}
});
});
});

使用ajax创建新元素时，需要再次绑定click事件。以第一个为例：

$(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
}

$（文档）.ready（函数（）{
$（“.addFavorite”）。单击（函数（）{
var行=$（此）；
$.ajax({
类型：“POST”，
url:“/app/Favs/jsoncreate？id=&name=”，
成功：功能（数据）{
$（行）。替换为（“”）；
$（'.deleteFavorite'）.bind（'click'，deleteFavorite（））；
}
});
});
});
函数deleteFavorite（）{
.deleteFavorite单击此处的操作
}

问题在于，当调用

replaceWith

时，删除了当前行及其所有事件处理程序。如果您更改：

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

到

那你可能会得到你想要的

---

发生这种情况的原因是，当您调用

。单击
，您只会将处理程序绑定到调用时与选择器匹配的元素。以后添加的任何元素都不会得到该处理程序
.live
基本上意味着jQuery在触发事件时检查匹配的元素。
正如其他人所指出的，使用
.replaceWith（）
将删除绑定到该元素的任何事件处理程序

考虑在元素的公共父级上使用

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


$（'#someCommonParent'）。委托（'.addFavorite'，单击'，函数（）{
var行=$（此）；
$.ajax({
类型：“POST”，
url:“/app/Favs/jsoncreate？id=&name=”，
成功：功能（数据）{
$（行）。替换为（“”）；
}
});
}).delegate（'.deleteFavorite'，click'，函数（）{
var id=$（this.attr（'id'）；
var行=$（此）；
$.ajax({
类型：“POST”，
url:“/app/Favs/jsondelete？id=“+id，
async:true，
数据：id，
成功：功能（数据）{
如果（数据==“1”）{
$（行）。替换为（“”）；
}
如果（数据=“0”）{
警报（“删除失败！”）
}
},
错误：函数（响应）{
警报（“收藏夹删除失败！”）；
}
});
});
什么意思？它只工作一次？这个答案也是正确的。移动函数调用是我试图做的，但仍然在为整个绑定工作而挣扎。马克的回答对我也很有用。谢谢，转为代表是最快的解决办法。
<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!');
        }
    });
});