Машинопись JQuery AJAX Навигация Issue

Question

Привет парень Earthicans,

Следующий код используется на моем сайте brianjenkins94.me для того, чтобы обрабатывать простые функции навигации и после некоторых недавних рефакторинга я, кажется, сломали # nav.on ("нажмите »), и я не могу понять причину.

Если кто-то может определить, почему этот код является нефункциональным или, возможно, дает некоторое представление о том, есть ли лучший способ сделать это, (Мне действительно интересна правильная конструкция и правильная практика, эта ошибка просто удобный повод сделать сообщение и получить ввод) был бы рад.

Благодаря загодя,

Brian

---

/// <reference path="jquery.d.ts" /> 
"use strict"; 

const SERVERNAME: string = "http://brianjenkins94.me/"; 
//const DOCUMENTROOT: string = "https://rawgit.com/brianjenkins94/local.blog.com/master/"; 

class Navigation { 
    private body: JQuery; 
    private nav: JQuery; 
    private navToggle: JQuery; 

    constructor(args: any[]) { 
    this.body = args[0]; 
    this.nav = args[1]; 
    this.navToggle = args[2]; 
    } 

    public init(): void { 
    this.stopPropogation(); 
    this.addClickListener(this.body); 
    this.addClickListener(this.navToggle); 
    this.addClickListener(this.nav); 
    this.addKeyCodeListener(27); 
    this.addLinkListener(); 
    } 

    private stopPropogation(): void { 
    (this.nav).on("click touchend", function(event: Event): void { 
     event.stopPropagation(); 
    }); 
    } 

    private addClickListener(target: JQuery): void { 
    (target).on("click touchend", (event: Event) => { 
     if (!(target === (this.body))) { 
     event.preventDefault(); 
     event.stopPropagation(); 

     if (target === this.navToggle) { 
      (this.body).toggleClass("nav-visible"); 
      return; 
     } 
     } 
     (this.body).removeClass("nav-visible"); 
    }); 
    } 

    private addKeyCodeListener(keycode: number): void { 
    $(window).on("keydown", function(event: JQueryKeyEventObject): void { 
     if (event.keyCode === keycode) { 
     (this.body).removeClass("nav-visible"); 
     } 
    }); 
    } 

    private addLinkListener(): void { 
    // FIXME: This can be optimized. 

    $("#nav .links a").click(function(event: Event): void { 

     if (!$(this).hasClass("active")) { 
     $("#nav .links a").removeClass("active"); 
     $(this).addClass("active"); 

     document.location.hash = $(this).attr("href"); 

     switch (document.location.hash) { 
      case "#home": 
      $.get(SERVERNAME + "home", function(data: string): void { 
       $("body").removeClass("nav-visible"); 
       $("#content").show(); 
       $("#iframe").html(data); 
       console.log("Loaded index.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#showcase": 
      $.get(SERVERNAME + "showcase", function(data: string): void { 
       $("body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded showcase.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#fraise": 
      $.get(SERVERNAME + "fraise", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded fraise.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#sharpcraft": 
      $.get(SERVERNAME + "sharpcraft", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded sharpcraft.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#tablature": 
      $.get(SERVERNAME + "tablature", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded tablature.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#web-design": 
      $.get(SERVERNAME + "web-design", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded web-design.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#about": 
      $.get(SERVERNAME + "about", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded about.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#devtools": 
      $.get(SERVERNAME + "devtools", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded devtools.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      default: 
      // No corresponding link 
      event.preventDefault(); 
      $("#body").removeClass("nav-visible"); 
      break; 
     } 
     } else { 
     // Same link 
     $("#nav .links a").removeClass("active"); 
     $(document.location.hash).click(); 
     console.log("Simulating " + document.location.hash + " link click."); 
     } 
    }); 

    if (document.location.hash.length === 0) { 
     $("#home").click(); 
     console.log("Simulating #home link click."); 
    } else { 
     $(document.location.hash).click(); 
     console.log("Simulating " + document.location.hash + " link click."); 
    } 
    } 
} 

var Nav: Navigation = new Navigation([$("body"), $("#nav"), $("a[href=\"#nav\"]")]); 
Nav.init(); 

Answer 1

$("#nav .links a").click(function(event: Event): void {

Используйте функцию стрелки вместо т.е. делать $("#nav .links a").click((event: Event): void => {. Это связано с тем, что в обработчике событий JQuery - это фактически объект, который был нажат, а не содержащий класс.

Вот видео по правильному использованию this: https://www.youtube.com/watch?v=tvocUcbCupA