click event doesn't work with dynamically content generated by ckeditor, jquery

Question

I have added the following content using ckeditor, and then I have added a "onclick" event with jquery, however for more than I try it does not work, I have specified the element using the "on" event but it still does not work, this is my code

script

$('.hP').hide();


$('.pregunta-cabeza').on('click','.prgnt',function(event) {
 var data=$(this).attr("data-val");
 var id=$(this).attr("id");
  $('.'+data).toggle(1100, 'swing');
  if ($('#'+id).text() === 'add_box') {
    $("#"+id).text("remove");
  }else {
   $("#"+id).text("add");
  } 
});

html

<div class="container">
      <div class="row">
        <div class="col s12 m12 l12 xl12">
          <div class="card">
            <div class="card">
              <div class="row">
                <div class="pregunta-cabeza col s12">
                  <p>2</p>
                  <h6 class="bold-text">PREGUNTAS FRECUENTES</h6>
                  <i id="pregunta_ver2" data-val="pregunta_2" class="material-icons prgnt">add</i>
                </div>
              </div>
              <div class="card-content hP pregunta_2">
                <div class="pregunta-content row">
                  <p>Quisque Eu Congue Purus</p>
                  <p>
                    Donec sit amet lectus sit amet justo lacinia cursus. Vivamus sem tellus, malesuada sit amet sodales eu, 
                    malesuada at metus. Praesent non odio lacinia, consectetur massa sit amet, rhoncus ipsum.
                  </p>
                  <p>
                    Quisque porttitor, velit nec pulvinar condimentum, mi erat finibus ante, sit amet tincidunt risus nisl non 
                    augue. Vivamus in turpis et tellus consectetur interdum. Suspendisse sagittis sem a scelerisque ornare. 
                    Donec lacinia tincidunt massa, quis egestas magna porta sed. Aliquam erat volutpat. Pellentesque hendrerit, 
                    nulla sit amet ultricies viverra, tellus dolor dignissim lacus, quis consequat augue purus non est.
                  </p>  
                </div> 
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

I want the box to appear and disappear when clicking, everything works fine, however when generating the content has no effect, should you follow other steps to add events to the content generated by ckeditor?

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Huelfe, Jul 03 '17 at 14:35

score 2 · Accepted Answer · answered Jul 03 '17 at 14:23

2

You should delegate event like this:

$(document).on('click','.prgnt',function(event) {
    ....
    ....
});

answered Jul 03 '17 at 14:23

Himanshu Upadhyay

6,558
1
20
33

score 1 · Answer 2 · answered Jul 03 '17 at 14:25

$('.hp').hide();

$(document).on('click','.pregunta-cabeza > .prgnt',function(event) {
 var data=$(this).data("val");
 var id=$(this).attr("id");
  $('.'+data).toggle(1100, 'swing');
  if ($('#'+id).text() === 'add_box') {
    $("#"+id).text("remove");
  }else {
   $("#"+id).text("add");
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
      <div class="row">
        <div class="col s12 m12 l12 xl12">
          <div class="card">
            <div class="card">
              <div class="row">
                <div class="pregunta-cabeza col s12">
                  <p>2</p>
                  <h6 class="bold-text">PREGUNTAS FRECUENTES</h6>
                  <i id="pregunta_ver2" data-val="pregunta_2" class="material-icons prgnt">add</i>
                </div>
              </div>
              <div class="card-content hP pregunta_2">
                <div class="pregunta-content row">
                  <p>Quisque Eu Congue Purus</p>
                  <p>
                    Donec sit amet lectus sit amet justo lacinia cursus. Vivamus sem tellus, malesuada sit amet sodales eu, 
                    malesuada at metus. Praesent non odio lacinia, consectetur massa sit amet, rhoncus ipsum.
                  </p>
                  <p>
                    Quisque porttitor, velit nec pulvinar condimentum, mi erat finibus ante, sit amet tincidunt risus nisl non 
                    augue. Vivamus in turpis et tellus consectetur interdum. Suspendisse sagittis sem a scelerisque ornare. 
                    Donec lacinia tincidunt massa, quis egestas magna porta sed. Aliquam erat volutpat. Pellentesque hendrerit, 
                    nulla sit amet ultricies viverra, tellus dolor dignissim lacus, quis consequat augue purus non est.
                  </p>  
                </div> 
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

First two lines I have edited :

$(document).on('click','.pregunta-cabeza > .prgnt',function(event) {
 var data=$(this).data("val");
 var id=$(this).attr("id");
  $('.'+data).toggle(1100, 'swing');
  if ($('#'+id).text() === 'add_box') {
    $("#"+id).text("remove");
  }else {
   $("#"+id).text("add");
  } 
});

click event doesn't work with dynamically content generated by ckeditor, jquery

2 Answers2