jquery script not working with jquery 1.11.0 cause of .live

Question

I wrote this script but I know live function is deprecated in 1.11 version.

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

so it does not work, but I need jQuery 1.11 for other plugin. I tried to adapt it with .on, but it did not succed. As you can see it works in the snippet when you use jQuery 1.6.2 version Any help is very welcome. Thanks

   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>

See [Can I use multiple versions of jQuery on the same page?](http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page). — Michał Perłakowski, Jan 17 '16 at 22:12
@DJDavid98 `bind()` is not a delegating method in 1.6 .. or current versions either — charlietfl, Jan 17 '16 at 22:30
What problems are encountered getting rid of `1.6` and upgrading? Signature of `on()` to replace `live()` does not use same syntax — charlietfl, Jan 17 '16 at 22:31
@charlietfl check my answer. I've updated the snippet. But stille the script with updated sintax does not work. I don't know what I'm doing wrong — user3303102, Jan 18 '16 at 11:13

user3303102 · Answer 1 · 2016-01-18T12:56:53.077

You cannot easily change .live with .on. The sintax changes. I followed this guide but it still does not work. Check the snippet. Dunno what's wrong

EDIT SOlved. I just used the css for the child element, not the parent element, and now it works :) snippet updated and working

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

jquery script not working with jquery 1.11.0 cause of .live

1 Answers1