Question

我无法使用动态生成的html数据绑定jQuery事件。这是我的代码。请帮我解决一下。我试过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

如何将事件与生成的动态数据绑定

1 个答案: