Как связать событие с генерируемыми динамическими данными

Я не могу связать события jQuery с динамически генерируемыми данными html. Это мой код. Пожалуйста, помогите мне в этом. Я пробовал функцию(), но все же он не работает. Несколько рекомендаций для решения этой проблемы с помощью метода 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/

источник

2014-09-06 Hamza Rabbani

Ваш вопрос очень неясен. Динамически генерируемые данные HTML? Где вы пытаетесь использовать '.on()' делегирование? Было бы очень полезно создать JSFIDDLE. – DevlshOne

http://jsfiddle.net/nfqz4bqq/ –

только тот блок минимизирует, который был создан по умолчанию. нет нового окна с событием клика –

Вместо того, чтобы ...

$('.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

источник

2014-09-07 00:00:32

Как связать событие с генерируемыми динамическими данными

ответ

Смежные вопросы