jquery - How to update DOM when selector is inside the dynamic code

Question

我有以下代码：

<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 没有发送）新内容一样。我怎样才能做到这一点，以便我可以再次单击作为动态代码一部分的链接，以便它可以重复我再次分配给它的任何代码。

Answer 1

使用事件委托为动态元素注册处理程序

$(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);
    });
});