帮助ajax只工作一次

Question

一直试图将其放入函数中进行实时调用，但无法实现。

这只起作用一次：

<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

使用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
}

Answer 2

正如其他人所指出的，使用.replaceWith()将删除绑定到该元素的任何事件处理程序。

考虑在元素的公共父级上使用.delegate()。

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

Answer 3

问题是，当调用replaceWith时，会删除当前行及其所有事件处理程序。如果您更改：

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

至

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

那么你可能会得到你想要的。

发生这种情况的原因是，当您调用.click时，您只将处理程序绑定到那些在调用时与选择器匹配的元素。以后添加的任何元素都不会得到该处理程序。.live基本上意味着jQuery在触发事件时检查匹配的元素。