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

当选择器在动态代码中时，如何更新DOM

1 个答案: