如何實現類中類的click處理程序？

我正在爲這樣的表中的每一行放置一個菜單選項。如何實現類中類的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>

我在做什麼錯？

來源

2017-08-24 Ola

您是否還有一個綁定在咔嗒咔嗒聲以及？嘗試將'e'傳遞給您的切換點擊處理程序並執行e.stopPropagation（）以防止事件冒泡到該元素（如果它們單擊切換按鈕）。 – Taplar

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

你的代碼工作正常，根據你給定的問題。 – Sravan

要創建因此，這是事件偵聽器連接到.toggle元素

你可以做的是使冒泡使用事件的javascript調用後，正在創建它是動態生成的菜單。嘗試一些javascript調用正在運行時靜態存在的容器元素，該元素將附加事件偵聽器，並且您確定將包含元素.toggle。附加事件監聽器使用jquery.on這個容器，並把選擇.toggle中選擇參數：

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

它是如何工作的：

在點擊.toggle元素，單擊事件冒泡即其父元素將會了解這個事件。一旦到達容器元素，我們的處理程序就會被調用。

來源

2017-08-24 16:41:42

謝謝你的工作 – Ola

如何實現類中類的click處理程序？

回答

相關問題