Jquery要素の置き換えの問題

Question

まず、適切な場所に移動しないとこの質問をする場所が不明です。

問題は私が最初のクリック機能を働かせ、html要素を変更することができますが、2番目のクリック機能を働かせて要素を元に戻すことができないという問題です。私はこの問題をどのように解決できるのだろうかと思っていましたか？

ここにコードがあります。

$(document).ready(function() { 
    $('.arrow').click(function(){ 
     $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear'); 
     $(this).html('<span class="arrow-alt">&#8595;</span>'); 
    }); 

    $('.arrow-alt').click(function(){ 
     $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear'); 
     $(this).html('<span class="arrow">&#8594;</span>'); 
    }); 

}); 

Answer 1

としては、あなたが.click()イベントを使用しているとき、それはDOMの既存部品上で動作する、ジャレッドによって指摘。

DOMに要素を動的に追加してイベントを追加する場合は、以前のバージョンでjquery 1.7以上または.delegate()を使用している場合は、.on()などの動的イベントを使用する必要があります。

.live()メソッドは、であるため、廃止されました。jqueryの1.7バージョンではです。あなたのhtmlが上記のマークアップのように見える場合は、あなたのコードは、スパンを置き換えるのではなく、あなたの最初のスパン内の第二のスパンを生成すること

は

Answer 2

<ol> 
    <span class="arrow">&#8594;</span> 
</ol> 

注意。これを避けるには、html関数の文字列パラメータを変更します。たとえば、removeClassとaddClassを使用します。 [ `.on（）`]（HTTP：：//api.jquery

私はあなたが探しているものだと思うが、このような何か（JMAXで言及onまたはdelegateのREF使用）

$(document).ready(function() { 
    $('ol').on('click', '.arrow', function(event){ 
     $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear'); 
     $(this).html('↓'); 
     $(this).removeClass('arrow'); 
     $(this).addClass('arrow-alt'); 
    }); 

    $('ol').on('click', '.arrow-alt', function(event){ 
     $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear'); 
     $(this).html('→'); 
     $(this).removeClass('arrow-alt'); 
     $(this).addClass('arrow'); 
    }); 
});