올바른 방법으로 jQuery를 처리하는 방법은 무엇입니까?

Question

각 캔버스가 특정 기능을 실행하는 캔버스 꺼짐 메뉴로 약간의 웹 앱을 만들고 있습니다. Google의 연구에 따르면 jQuery의 .on("click", ...은 attr onclick("myFunction()")보다 낫습니다. 이 함수는 HTML 파일 (숨겨진 div에 저장 됨)과 ajax가있는 동적 데이터 (JSON)의 정적 데이터를 뷰포트의 div에로드합니다.

그래서 여기 내 질문이 있습니다.이 같은 것을 달성하기위한 솔루션이 많이 있다는 것을 알고 있지만 이것은 "훌륭하고 효율적인"방식입니까? 어쩌면 바보 같은 질문 일지 모르지만 나는 학습의 진전에 있습니다 :) 대단히 감사합니다!

$(document).on("click",".sidebar a", function(ev) { 
    // get class from clicked menu item 
    var sidebar_class = $(this).attr("class"); 

    // load static data from hidden div into .container 
    // e.g. .credits would load .page-credits 
    $(".container").html($(".page-"+sidebar_class).html()); 

    // hide sidebar again 
    hideSidebar(); 
}); 

:

HTML

<ul> 
    <li><a class="home" href="#">Home</a></li> 
    <li><a class="credits" href="#">Credits</a></li> 
</ul> 

자바 스크립트 동적 데이터에 대한

$(".sidebar a").on("click", function(ev) { 
    // get class from clicked menu item 
    var sidebar_class = $(this).attr("class"); 

    // load static data from hidden div into .container 
    // e.g. .credits would load .page-credits 
    $(".container").html($(".page-"+sidebar_class).html()); 

    // hide sidebar again 
    hideSidebar(); 
}); 

Answer 1

당신이 게시 코드는 아무 잘못이 없습니다, 다른 유효한 대안은 다음과 같습니다 답장을 보내

$(".sidebar a").click(function() { //you don't ned the ev and you can use the click() method that is the same of on("click" 

$(".sidebar").on("click", "a", function() { //you have a single delegate listener for all as instead of one listener for each one. 

Answer 2

(BTW 정적들과 함께 작동) (정적 데이터), 위임을 사용 여기 나는 문서를 사용하지만, y ou는 동적 내용과 가장 가까운 정적 컨테이너를 사용해야합니다.