2017-08-24 78 views
1

我正在为这样的表中的每一行放置一个菜单选项。 enter image description here如何实现类中类的click处理程序?

菜单选项类是“toggle-wrap”,表格行类是“text-left”。这是我的菜单选项,单击处理

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

我在做什么错?

+0

您是否还有一个绑定在咔嗒咔嗒声以及?尝试将'e'传递给您的切换点击处理程序并执行e.stopPropagation()以防止事件冒泡到该元素(如果它们单击切换按钮)。 – Taplar

+0

它工作正常:https://jsfiddle.net/wm8zq58x/ –

+0

你的代码工作正常,根据你给定的问题。 – Sravan

回答

0

要创建因此,这是事件侦听器连接到.toggle元素

你可以做的是使冒泡使用事件的javascript调用后,正在创建它是动态生成的菜单。尝试一些javascript调用正在运行时静态存在的容器元素,该元素将附加事件侦听器,并且您确定将包含元素.toggle。附加事件监听器使用jquery.on这个容器,并把选择.toggle中选择参数:

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

它是如何工作的:

在点击.toggle元素,单击事件冒泡即其父元素将会了解这个事件。一旦到达容器元素,我们的处理程序就会被调用。

+0

谢谢你的工作 – Ola

相关问题