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/

Your question is very unclear. Dynamically generated HTML data? Where are you trying to use the .on() delegation? It would be most helpful if you could create a JSFIDDLE. — DevlshOne
– DevlshOne, Commented Sep 6, 2014 at 22:36
only that box minimizes which was created by default. no new box minimize with click event — Hamza Rabbani
– Hamza Rabbani, Commented Sep 6, 2014 at 22:56
What are you trying to do? As far as I understand your question: You want to minimize the text block? Well that actually works in Firefox. — Meules
– Meules, Commented Sep 6, 2014 at 23:00
sure it's working but for the first box which is already made. but it does not minimize boxes which are made by clicking add new question — Hamza Rabbani
– Hamza Rabbani, Commented Sep 6, 2014 at 23:04

Community · Accepted Answer · 2017-05-23 11:44:51Z

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

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Sep 7, 2014 at 0:00

user4004613

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to bind event with dynamic data generated

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related