单击事件不适用于由 ckeditor、jquery 生成的动态内容

Question

我使用 ckeditor 添加了以下内容，然后我使用 jquery 添加了一个"onclick"事件，但是我尝试了更多它不起作用，我已经使用 "on" 事件指定了元素，但它仍然不起作用，这是我的代码

脚本

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

我希望点击时框出现和消失，一切正常，但是生成内容时没有效果，您是否应该按照其他步骤将事件添加到 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>

我编辑的前两行：

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