javascript - 如何从父元素中删除事件并仅为其特定子元素启用该事件？

Question

我想禁用带有 class="cash" 的 li 元素的点击事件，但同时我希望为其带有 class="pay-button" 的子元素之一启用点击事件 /* 这是我正在使用的脚本在脚本标签 */

    <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'));
    });