如何從父元素中移除一個事件，並只爲其特定的子元素啓用該事件？

Question

我想爲class =「cash」的li元素禁用點擊事件，但同時我希望爲其子元素之一啓用點擊事件，其中class =「pay-button」 /*這是腳本i正在使用的腳本標記所示*/

<script> 
      (function(){ 

      // Append a close trigger for each block 
      $('.menu .content').append('<span class="close">x</span>');  
      // Show window 
      function showContent(elem){ 
       hideContent(); 
       elem.find('.content').addClass('expanded'); 
       elem.addClass('cover'); 
      } 
      // Reset all 
      function hideContent(){ 
       $('.menu .content').removeClass('expanded'); 
       $('.menu li').removeClass('cover');  
      } 

      // When a li is clicked, show its content window and position it above all 
      $('.menu li').click(function() { 
       showContent($(this)); 
      }); 


      // When tabbing, show its content window using ENTER key 
      $('.menu li').keypress(function(e) { 
       if (e.keyCode == 13) { 
        showContent($(this)); 
       } 
      }); 

      // When right upper close element is clicked - reset all 
      $('.menu .close').click(function(e) { 
       e.stopPropagation(); 
       hideContent(); 
      });  
      // Also, when ESC key is pressed - reset all 
      $(document).keyup(function(e) { 
       if (e.keyCode == 27) { 
        hideContent(); 
       } 
      }); 

      })(); 

/*This is HTML code */ 

    <ul class="menu"> 
     <li tabindex="1"> 
      <span class="title">One</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> 
     </li> 
     <li tabindex="1"> 
      <span class="title">Two</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> 
     </li> 
     <li tabindex="1"> 
      <span class="title">Three</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> 
     </li> 
     <li tabindex="1"> 
      <span class="title">Four</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> 
     </li> 
     <li tabindex="1" class="cash"> 
      <span class="title">Five</span> 
      <table> 
      <tr> 
      <button class="pay-button" id="pay">Pay</button> 
      </tr> 
      <tr> 
      <td> 
       <label>Token No.</label> 
       <input type="text"/> 
      </td> 
      </tr> 

      </table> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> 
     </li> 

     <li tabindex="1"> 
      <span class="title">Six</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> 
     </li> 
     <li tabindex="1"> 
      <span class="title">Seven</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> 
     </li> 
     <li tabindex="1"> 
      <span class="title">Eight</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> 
     </li> 
     <li tabindex="1"> 
      <span class="title">Nine</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> 
     </li>  
     </ul> 

Answer 1

嘗試此父元素：

$("li.cash").off("click"); 

和子元素：

$("li.cash button.pay-button").on("click", function(event) { 
    event.preventDefault(); //optional(depends on case) 
    event.stopPropagation(); 

    //do stuff here 
}); 

Answer 2

first function to unbind click event of parent 

    $('.menu li.cash').unbind('click'); 
then second function to bind click event to chile element, and inside it we call showContent() method of parent again 

    $("#pay").bind('click',function() { 
     showContent($('.menu li.cash')); 
    });