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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我编辑的前两行：

$(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事件不适用于ckeditor，jquery生成的动态内容

2 个答案: