リンクのIDを変更した後に同じ機能を実行するのはなぜですか？

Question

jqueryとphpでお気に入りを追加/削除しようとしています。 addfavorite関数は機能しますが、リンクのid属性をaddfavoriteからremovefavoriteに変更すると機能しません。 idは変更されましたが、まだaddfavorite機能を実行しています。 Firebugを開くと、id = "removefavorite"でIDが変更されていますが、ページソースを開くとID = 'addfavorite'は変わりません。ドームでさえ？

JQUERY: 
$(document).ready(function() { 
$('#addfavorite').click(function() { 
    id = $('#item').attr('value'); 
    $.ajax({ 
     type: "POST", 
     url: "http://127.0.1.1/zend/fm/public/video/addfavorite", 
     data: "id_video="+id, 
     cache: false, 
     async: false, 
     success: function(result) { 
      $('#addfavorite').attr('id','removefavorite'); 
      $('#removefavorite').text('Remove from favorite'); 
     getRating(text); 
     }, 
     error: function(result) { 
      alert("some error occured, please try again later"); 
     } 
    }); 
}); 

$('#removefavorite').click(function() { 
    id = $('#item').attr('value'); 
    $.ajax({ 
     type: "POST", 
     url: "http://127.0.1.1/zend/fm/public/video/removefavorite", 
     data: "id_video="+id, 
     cache: false, 
     async: false, 
     success: function(result) { 
      $('#removefavorite').attr('id','removefavorite'); 
      $('#removefavorite').text('Remove from favorite'); 
     getRating(text); 
     }, 
     error: function(result) { 
      alert("some error occured, please try again later"); 
     } 
    }); 
}); 
)}; 

HTML: 
<a href="javascript:void(0)" id="addfavorite"> 
    Add to favorite 
</a> 

Answer 1

$('#addfavorite').toggle(function() { 
    id = $('#item').attr('value'); 
    $.ajax({ 
     type: "POST", 
     url: "http://127.0.1.1/zend/fm/public/video/addfavorite", 
     data: "id_video="+id, 
     cache: false, 
     async: false, 
     success: function(result) { 
      $('#addfavorite').text('Remove from favorite'); 
      getRating(text); 
     }, 
     error: function(result) { 
      alert("some error occured, please try again later"); 
     } 
    }); 
    }, function() { 
    id = $('#item').attr('value'); 
    $.ajax({ 
     type: "POST", 
     url: "http://127.0.1.1/zend/fm/public/video/removefavorite", 
     data: "id_video="+id, 
     cache: false, 
     async: false, 
     success: function(result) { 
      $('#addfavorite').text('Remove from favorite'); 
      getRating(text); 
     }, 
     error: function(result) { 
      alert("some error occured, please try again later"); 
     } 
    }); 
    }); 

要素のidを変更しないでラベルを変更するだけです。私はそれがあなたを助けると思う。

Answer 2

まず、あなたが使用するID属性を使用するリンクはいくつですか？ IDはの単一の要素の単なるIDであることを覚えておいてください。 トグル機能http://api.jquery.com/toggle-event/を使用してこれを行うことをお勧めします。

私はあなたの代わりに.liveイベントの.clickイベントを使用して、あなたはクリックイベントにそれを有界とき（それは#removefavoriteだから）#removefavoriteイベントが存在しないため、コードが動作していないと思います。イベントは要素に割り当てられているため、要素は属性を変更してもイベントを保持できます。トグルまたはライブ機能ではしたくない場合は、最初のクリックイベントをアンバインドしてから別のイベントを割り当てます。

また、Firebugは変更されたDOMをオンザフライで表示するため、変更されたことがわかります。ビューソースを実行すると、ダウンロードした元のHTMLドキュメントを表示しています（javascriptを変更せずに）。

私はまた、あなたがFirefox用FireQueryの拡張機能を使用することをお勧めします。（あなたはjQueryの中で開発している場合は、他の有用なデータの中で）これは、その要素に、あなたにバインドさのイベントが表示されます

が私の最初のポストはあなたを役に立てば幸い:)

Answer 3

これは、文書が$(document).ready(function() { ... }に読み込まれた後に、クリック機能をバインドするという回答です。

本当にAjax呼び出しが成功した場合は、リンクのIDを変更しても問題ありません。私はそれに何らかの誤りを見つけることはできません。 トリガーをリフレッシュしないことです。したがって、IDが要素上で変更されても、以前のトリガーはまだバインドされています。 それを解決する方法は、再実行してトリガーを更新することです$('#removefavorite').click(function() { ... });

他の関数を書き込むことはできません。なぜなら、相互に1290383948回ネストできないからです。 ;-)

私はJSFiddleですばやく作成した例です。http://jsfiddle.net/S2ERT/ 1分でこれを行ったように正しくコーディングされていませんが、そのアイデアをキャッチします。