javascript - 单击特定元素后隐藏父元素: Jquery troubles

Question

我们正处于项目的最后一步，我们无法摆脱这个问题。

基本上，我们正在开发的页面是在视频中创建章节的表单。对于创建的每个章节，验证后都会创建一张小“卡片”。我们希望用户能够通过单击每个章节卡中显示的 X Font-Awesome 图标来隐藏章节。

想法:点击 X 后，卡片通过 hide() 消失/获取一个新类 .displayNone 并淡出。

所以我们有“卡片”的 HTML 结构:

            <div class="ch">
                <p>
                    <i class="fa fa-times fa-fw chap"></i> Chap. '.$row->num.'
                        <ul>
                            <li id="li" value="'.$row->ID_sequence.'">Titre : '.$row->title.'</li>
                            <li>D&eacute;but : '.$row->tcStart.'s</li>
                            <li>Fin : '.$row->tcEnd.'s</li>
                        </ul>
                </p>
            </div>

我们在 Jquery 上尝试过这个

$(".chap").click(function () {
            var VignParent = $( this ).parents('.ch');
            VignParent.addClass('displayNone');
            VignParent.fadeOut( 100 );
           });

还有这个

$("i").click(function () {
        $( ".ch" ).hide( "slow");
      });

这些都不起作用，所以我想知道互联网上的一些帮助。当然，我们在这里搜索后尝试了很多东西，而这个JS是最后的尝试......预先感谢您帮助我们

Answer 1

如果新卡是动态创建的(使用 js/ajax)，则不会附加任何监听器。试试这个代码

$(document).on('click', '.chap', function () {
   $( this ).parents('.ch')
            .addClass('displayNone')
            .fadeOut( 100 );
});

ps:你可能有空标签 <i class="fa fa-times fa-fw chap"></i>