scripts.js function doesn't run when button is clicked

scripts.js function doesn't run when button is clicked

Hello,

I have a button used for logging in, and when a user clicks this a box should be overlayed allowing them to login, I know it does work as the site I'm using is a template, however in practice it doesn't work.

HTML:

  1. <div class="header-login">

              <a href="#" class=""><i class="fa fa-power-off"></i> Login</a>

              <div>
                <form action="#">
                  <input type="text" class="form-control" placeholder="Username">
                  <input type="password" class="form-control" placeholder="Password">
                  <input type="submit" class="btn btn-default" value="Login">
                  <a href="#" class="btn btn-link">Forgot Password?</a>
                </form>
              </div>

            </div>

and my jQuery:


  1. var $headerLoginRegister = $('#header .header-login, #header .headerregister');

      $headerLoginRegister.each(function () {
        var $this = $(this);

        $this.children('a').on('click', function (event) {
          event.preventDefault();
          $this.toggleClass('active');
        });

        $this.on('clickoutside touchendoutside', function () {
          if ($this.hasClass('active')) { $this.removeClass('active'); }
        });
      });



      var $headerNavbar = $('#header .header-nav-bar .primary-nav > li');

      $headerNavbar.each(function () {
        var $this = $(this);

        $this.children('a').on('click', function (event) {
          $this.toggleClass('active');
        });

        $this.on('clickoutside touchendoutside', function () {
          if ($this.hasClass('active')) { $this.removeClass('active'); }
        });
      });


I'm having a hard time making sense of what's going on, and am struggling to make it work. Would really appreciate some help!