How to bind event with dynamic data generated

Question

I'm unable to bind jQuery events with dynamically generated html data. This is my code. Please help me through it. I've tried on() function but still it doesn't not working. Multiple guidelines guide to resolve this problem with on() method but it's not working. Please guide me through this. Thanks

 <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

Instead of...

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

You can write...

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

I tried it and it works because there is a related question