jQuery 脚本不适用于 jQuery 1.11.0 导致 .live

Question

我写了这个脚本，但我知道实时函数在 1.11 版本中已被弃用。

jQuery(document).ready(function(){
            jQuery('#menu-button').live('click', function(event) {        
            jQuery('#menumobile').toggleClass('hidemobilemenu');
    });
});

所以它不起作用，但我需要 jQuery 1.11 用于其他插件。我试图用 .on 改编它，但它没有成功。如您所见，当您使用 jQuery 1.6.2 版本时，它在代码段中有效非常欢迎任何帮助。谢谢

			jQuery(document).ready(function(){
			jQuery('#menu-button').live('click', function(event) {        
			jQuery('#menumobile').toggleClass('hidemobilemenu');
    });
});

#menu-button {
    background-color: #ddd;
    position: fixed;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    top: 15px;
    right: 13px;
    z-index: 30;
}
#menumobile {
    background: #fff none repeat scroll 0 0;
    height: 100%;
    left: 0px;
    padding: 50px 70px 0 40px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 29;
}
 .hidemobilemenu {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="menu-button">
<a href="#"><span></span><span></span><span></span></a>
    </div>
    <div id="menumobile" class="hidemobilemenu">      
	<ul>
        <li class="<?php echo ($_SERVER['REQUEST_URI'] == "/index.php" ? "active" : "");?>"><a href="/index.php">HOME</a></li>
        <li class="<?php echo ($_SERVER['REQUEST_URI'] == "/menu.php" ? "active" : "");?>"><a href="menu.php">MENU</a></li>
        <li class="<?php echo ($_SERVER['REQUEST_URI'] == "/about.php" ? "active" : "");?>"><a href="about.php">ABOUT</a></li>
        <li class="<?php echo ($_SERVER['REQUEST_URI'] == "/contact.php" ? "active" : "");?>"><a href="contact.php">CONTACT</a></li>
      </ul>
	</div>

Answer 1

你不能轻易地用 .on 更改 .live。汉税变化。我遵循了本指南，但它仍然不起作用。检查代码段。邓诺怎么了

编辑解决。我只是将 css 用于子元素，而不是父元素，现在它可以:)代码段已更新并正常工作

$(document).ready(function() {
  $("#menu-button").on("click", ".clickspan", function() {
    $("#menumobile").toggleClass("hidemobilemenu");
  });
});

.clickspan {
  background-color: #ddd;
  position: fixed;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  top: 15px;
  left: 13px;
  z-index: 30;
}
#menumobile {
  background: #fff none repeat scroll 0 0;
  height: 100%;
  left: 0px;
  padding: 50px 70px 0 40px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 29;
}
.hidemobilemenu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu-button">
  <div class="clickspan">
   <a href="#"> <span></span><span></span><span></span> </a>
  </div>
</div>
<div id="menumobile" class="hidemobilemenu">
  <ul>
    <li class="<?php echo ($_SERVER['REQUEST_URI'] == " /index.php " ? "active " : " ");?>"><a href="/index.php">HOME</a>
    </li>
    <li class="<?php echo ($_SERVER['REQUEST_URI'] == " /menu.php " ? "active " : " ");?>"><a href="menu.php">MENU</a>
    </li>
    <li class="<?php echo ($_SERVER['REQUEST_URI'] == " /about.php " ? "active " : " ");?>"><a href="about.php">ABOUT</a>
    </li>
    <li class="<?php echo ($_SERVER['REQUEST_URI'] == " /contact.php " ? "active " : " ");?>"><a href="contact.php">CONTACT</a>
    </li>
  </ul>
</div>