9

このようなリンクが必要です。クリックするとテキストに変わり、テキストからマウスを離すとリンクに戻ります。

HTML:

    <a href="#">click me and change to text</a>

JS:

    $("a").on('click',function(){
        var $lnk = $(this);
        var $replace = $('<span>');
        $replace.text($lnk.text());
        // Link to Text
        $lnk.replaceWith($replace);
        // Text to Link
        $replace.one('mouseout',function(){
            $replace.replaceWith($lnk);
        });
        return false;
    });

コードは初回のみ機能します。の後に動作して$("a").on("click",function(){})いないようreplaceWithです。

フィドル: http://jsfiddle.net/uABC9/4/

jQuery 1.10.1 を使用しており、FF と Chrome の両方をテストしました。助けてください。

4

4 に答える 4

17

交換

$("a").on('click',function(){

に

$(document).on('click','a',function(){

そのため、委任されたイベントを使用できます。そうすることで、ハンドラーは作成される可能性のある将来のアンカー要素に適用されます。これは、実行時にドキュメントからアンカーを削除していることを考慮する必要があります。replaceWith

デモ

委任されたイベントの詳細については、こちら(「直接および委任されたイベント」セクションを参照してください)

于 2013-10-03T01:26:10.037 に答える
3

jQueryの「オン」は機能しますが、リンクなのでクリックすると別の場所にリンクします。

ここに1つのフィドルがあります：http://jsfiddle.net/joydesigner/4f8Zr/1/

もう 1 つの理由は、コードが $replace.replaceWith($lnk) を使用している可能性があります。これは、$lnk がこれであるためです。したがって、同じテキストとリンクが引き続き使用されることを意味します。

コードは次のとおりです。

$("a").on('click',function(){
  var $lnk = $(this),
      $replace = $('<span>');

$replace.text($lnk.text());
// Link to Text
$lnk.replaceWith($replace);

// Text to Link
$replace.one('mouseout',function(e){
    $replace.replaceWith('<a href="#">test</a>');
});

e.preventDefault();
return false;

});

于 2013-10-03T01:35:49.100 に答える
2

ドキュメントが最初にロードされたとき、aタグのクリックを監視します。しかし、aタグが新しいタグに置き換えられると、新しいタグは監視されなくなります。

リンクの周りに div を配置し、jQuery で div 内のすべてのリンク クリックを監視することをお勧めします。私の例に示すように。

HTML

<div id="test">
   <a href="#">click me and change to text</a>
</div>

jQuery

$("#test").on('click','a',function(){
   var $lnk = $(this);
   var $replace = $('<span>');
   $replace.text($lnk.text());
   // Link to Text
   $lnk.replaceWith($replace);
   // Text to Link
   $replace.one('mouseout',function(){
      $replace.replaceWith($lnk);
   });
   return false;
});

http://jsfiddle.net/uABC9/8/

于 2013-10-03T01:33:54.037 に答える
0

マークされた答えは正しいです。すべてのリンクではなく、たとえば1 つのみのエラーを修正する必要がある場合、この行が機能することを自分で追加したかっただけです( follow-unfollow-buttonはリンク ID です) ) $(document).on('click', 'a#follow-unfollow-button', function(e) {

于 2020-05-27T07:08:27.400 に答える