-2

次のコードがあります。

<div id="programming">
    <div id="prosec" class="col-md-12">
        <h2  class="featurette-heading">Text Here...</h2>
        <p class="lead">More Text Here...</p>
        <p class="lead">Guess what... MORE Text!!</p>
        <p><a id="proclick" class="btn btn-large btn-primary" href="#programming">Click for even more text</a></p>
    </div>
</div>

そして、私は次のJQueryを持っています:

$('#proclick').on('click', function(){
    $('#prosec').animate({opacity:'0'},450, function() {
      $('#prosec').empty().append("More Text Yeiii!")}).animate({opacity:'1'},450);
    });
});

ここでの問題は、proclick アンカーをもう一度クリックすると、同じアニメーションが再び実行されるようにしようとしていることです。現在、初回のみ実行中です。DOM が新しいコンテンツに気付かなかった (または JQuery が送信しなかった) ように。動的コードの一部であるリンクをもう一度クリックして、割り当てたコードをもう一度繰り返すことができるようにするにはどうすればよいですか。

4

1 に答える 1

3

イベント委任を使用して動的要素のハンドラーを登録する

$(document).on('click', '#proclick', function(){
    $('#prosec').animate({opacity:'0'},450, function() {
      $('#prosec').empty().append("More Text Yeiii!")}).animate({opacity:'1'},450);
    });
});

programming要素が動的でない場合

$('#programming').on('click', '#proclick', function(){
    $('#prosec').animate({opacity:'0'},450, function() {
      $('#prosec').empty().append("More Text Yeiii!")}).animate({opacity:'1'},450);
    });
});
于 2013-09-12T00:15:36.347 に答える