jQueryのホバーオーバーヒルでない

Question

私の問題は私がボタンを持っていると、ユーザーがマウスをその上に置くと、テキストを変更する必要があります。そして、マウスがホバーアウトすると、前の状態に戻ります。ここで

は私のjQueryのは、Twitterのフォロー/アンフォローボタンのように動作するはずだ

$(document).ready(function() { 
    $("#followingbutton").hover (
     function() { 
      $(this).replaceWith("<input type='submit' value='Unfollow' id='followingbutton' class='button red' />"); 
     }, 
     function() { 
      $(this).replaceWith("<input type='submit' value='Following' id='followingbutton' class='button green' />"); 
    }); 
}); 

です。誰か私のためにいくつかの光を当てることができますか？

EDIT：

$(document).ready(function() { 
    $("#followingbutton").hover (
     function() { 
      $(this).val('Unfollow') 
        .attr('class', 'button red'); 
     }, 
     function() { 
      $(this).val('Following') 
        .attr('class', 'button green'); 
    }); 
}); 

Answer 1

なぜない（未テスト）のようなもの 'unhover' 文句を言わないことを除いて、正常に動作しますか？

$(document).ready(function() { 
    $("#followingbutton").hover (
     function() { 
      $(this).removeClass('green').addClass('red').attr('value', 'Unfollow'); 
     }, 
     function() { 
      $(this).removeClass('red').addClass('green').attr('value', 'Follow'); 
    }); 
}); 

Answer 2

あなたはこのような何かをやってみません理由：すべては

Answer 3

要素が置き換えられたときにイベントがもうバインドされないため、解除されません。

だけではなく、価値やクラスを変更：

$("#followingbutton").hover (
    function() { 
     $(this).val('Unfollow').toggleClass('red green'); 
    }, 
    function() { 
     $(this).val('Following').toggleClass('red green'); 
}); 

例 - あなたは、イベントリスナーを持っている要素を削除し、同様の要素

でそれを置き換えるよりも、ためであるhttp://jsfiddle.net/infernalbadger/ETVpK/1/

Answer 4

をこれを試してみてください：

$(document).ready(function() { 
    $("#followingbutton").hover (
     function() { 
      this.value = 'Unfollow'; 
      this.className = 'button red'; 
     }, 
     function() { 
      this.value = 'Following'; 
      this.className = 'button green'; 
    }); 
});