如何实现类中类的单击处理程序？

Question

我正在为这样的表中的每一行添加一个菜单选项。

菜单选项类是＆＃34; toggle-wrap＆＃34;并且表行类是＆＃34; text-left＆＃34;。这是我的菜单选项点击处理程序

    (function($){

           $( '.toggle' ).click(function(){
             var target = $( this ).data( 'menu' );

             $( '#' + target ).toggleClass( 'menu--open' );
           });

        })(jQuery);

当菜单选项本身时，处理程序工作，但当我将菜单选项类添加到下面代码中的表行类时，我无法使单击处理程序工作。

  <td class="text-left" >

                     <div class="toggle-wrap">
                        <button class="toggle" data-menu="settings"><i class="fa fa-cog"></i><span>Settings</span></button>
                        <ul class="menu menu--toggle" id="settings">
                          <li class="menu__item">Edit My Profile<i class="fa fa-user"></i></li>
                          <li class="menu__item">Edit Account Details<i class="fa fa-list"></i></li>
                          <li class="menu__item">Need Help<i class="fa fa-support"></i></li>
                          <li class="menu__item">Sign Out<i class="fa fa-lock"></i></li>
                        </ul>
                      </div>


                  </td>

我做错了什么？

Answer 1

您正在创建的菜单是动态生成的，所以它是在javascript调用之后创建的，它将事件监听器附加到.toggle元素

您可以做的是使用事件冒泡。尝试一些在javascript调用运行时静态存在的容器元素，它附加了事件监听器，并且您确定它将包含.toggle元素。使用jquery.on将事件侦听器附加到此容器，并将选择器.toggle放入选择器参数中：

$(container).on('click', '.toggle', handler)

工作原理：

点击.toggle元素后，点击事件会冒泡，即其父元素将了解此事件。一旦它到达容器元素，我们的处理程序就会被调用。