クリックイベントは、ckeditor、jqueryによって生成された動的コンテンツでは機能しません。

Question

ckeditorを使用して次のコンテンツを追加した後、jqueryで「onclick」イベントを追加しました。私は、これは私のコード

スクリプト

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

及びdは、イベント「上」が、それはまだ動作しませんを使用して要素を指定していますクリックするとすべてが表示されますが、コンテンツを生成しても効果がない場合は、ckeditorによって生成されたコンテンツにイベントを追加するための他の手順を実行する必要がありますか？

Answer 1

あなたはこのようなイベントを委任する必要があります

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

Answer 2

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

私が編集した最初の2行：動的に作成された要素を上の結合[イベントの

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