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

他にも触れたように、.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 2

あなたは、AJAXを使用して新しい要素を作成する場合、再度クリックイベントをバインドする必要があります。一例として、最初のものを使用する：

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

問題は、あなたがreplaceWithを呼び出すとき、あなたは現在の行とそのすべてのイベントハンドラを削除することです。あなたが変更した場合：

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

へ

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

をあなたはおそらく、あなたが望む結果を得るでしょう。

.clickを呼び出すと、呼び出し時にセレクタに一致する要素にのみハンドラがバインドされるためです。後で追加された要素はそのハンドラを取得しません。 .liveは基本的に、イベントがトリガーされたときにjQueryが一致する要素をチェックすることを意味します。