javascript - 如何将事件与生成的动态数据绑定(bind)

Question

我无法将 jQuery 事件与动态生成的 html 数据绑定(bind)。这是我的代码。请帮助我度过难关。我已经尝试过 on() 函数，但它仍然不起作用。多个指南指导使用 on() 方法解决此问题，但它不起作用。请引导我完成这个过程。谢谢

 <a href="#"><span class="btn btn-warning addnew">Add New Question</span></a>
    <div class="clearfix"></div>
    <br/>
    <script>
        var div = '<section class="panel default red_border horizontal_border_1 h2">       <div class="block-web">           <div class="header">               <div class="actions"> <a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a> <a class="refresh" href="#"><i class="fa fa-repeat"></i></a> <a class="close-down" href="#"><i class="fa fa-times"></i></a> </div>               <h3>Default Block</h3>           </div>           <div class="body-content">               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non lectus molestie, condimentum quam et, iaculis justo. Nunc vel ultricies nunc. Aliquam tempus sodales eros vel tincidunt. Proin ultricies bibendum urna et aliquam. Nunc quis nisl sit amet erat bibendum aliquet.</p>           </div>       </div>   </section>';
        $(".addnew").click(function(){
            $(".insertafter").after(div);
        });


</script>
<div class="insertafter"></div>
<div class="col-lg-4 col-md-4">
    <section class="panel default red_border horizontal_border_1 h2">
        <div class="block-web">
            <div class="header">
                <div class="actions"> <a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a> <a class="refresh" href="#"><i class="fa fa-repeat"></i></a> <a class="close-down" href="#"><i class="fa fa-times"></i></a> </div>
                <h3>Default Block</h3>
            </div>
            <div class="body-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non lectus molestie, condimentum quam et, iaculis justo. Nunc vel ultricies nunc. Aliquam tempus sodales eros vel tincidunt. Proin ultricies bibendum urna et aliquam. Nunc quis nisl sit amet erat bibendum aliquet.</p>
            </div>
        </div>
    </section>
</div>

<script>


    /*==Porlets Actions==*/
       $('.minimize').click(function(e){
           var h = $(this).parents(".header");
           var c = h.next('.body-content');
           var p = h.parent();

           c.slideToggle();

           p.toggleClass('closed');

           e.preventDefault();
       });

       $('.refresh').click(function(e){
           var h = $(this).parents(".header");
           var p = h.parent();
           var loading = $('<div class="loading"><i class="fa fa-refresh fa-spin"></i></div>');

           loading.appendTo(p);
           loading.fadeIn();
           setTimeout(function() {
               loading.fadeOut();
           }, 1000);

           e.preventDefault();
       });

       $('.close-down').click(function(e){
           var h = $(this).parents(".header");
           var p = h.parent();

           p.fadeOut(function(){
               $(this).remove();
           });
           e.preventDefault();
       });


</script>

jsfiddle:http://jsfiddle.net/nfqz4bqq/

Answer 1

而不是...

$('.minimize').click(function(e){
//..
});

你可以写...

$('body').on('click', 'a.minimize', function() {
           var h = $(this).parents(".header");
           var c = h.next('.body-content');
           var p = h.parent();
           console.log(this);
           c.slideToggle();

           p.toggleClass('closed');

           //e.preventDefault();
       });

我尝试了一下，它有效，因为有一个 related question