幻灯片切换[Jquery函数]不工作 [英] Slide Toggle [Jquery Function] Not Working

问题描述

我使用此代码运行幻灯片切换，但点击它时无法打开：

I use this code to run a slide toggle but it doesn't open when I click on it:

JS代码：

    <script type="text/javascript">
     $(document).ready(function () {
         alert('hi i came to toggle');
         $(".flip").click(function () {
             $(this).next().slideToggle("fast");
         });
     });

      function ViewGetSubjects(data) {
         var subjects = (typeof data) == 'string' ? eval('(' + data + ')') : data;
         $('#subjects').empty();
         for (var i = 0; i < subjects.length; i++)
          {
              $('#subjects').append('<h1 class = "flip">'+subjects[i].Wkp_lesson+'</h1><div class="panel" >' + ' Weekly Body: ' + subjects[i].Wkp_Body + ' Weekly Body: ' + subjects[i].Wkp_Body + ' Weekly Lesson: ' + subjects[i].Wkp_lesson + '</div>');
             }
      } 

CSS：

       div.panel,h1.flip
      {
         margin:0px;
         padding:5px;
         text-align:center;
         background:#488AC7;
         border:solid 1px #F6358A;
       }
     div.panel
     {
         height:120px;
         display:none;
     }

你知道为什么吗？

感谢很多：）

推荐答案

最新版本的jquery

If you are not using latest version of jquery

 $(".flip").live('click', function(e){
     $(this).next().slideToggle("fast");
 });

否则应为

$("#subjects").on('click', 'h1.flip', function(e){
    $(this).next().slideToggle("fast");
});

因为您要附加 DOM c $ c> #subjects （ h1 h1 元素具有id = subject）元素。

because you are appending DOM(h1 with class name flip) elements dynamically inside the #subjects (element that has id=subjects) element.

参考文献： on 和 live（已弃用）。

这篇关于幻灯片切换[Jquery函数]不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！