jQuery 캐시 된 선택기가 올바르게 작동하지 않습니다.

Question

JavaScript 및 jQuery 사용 캐시 개체 속성의 선택기를 사용하려고합니다.

나는 $("#dnsTitle") 그러나 아래로 내 zPanelDNS.events 기능에서 나는 선택기 및 캐시 된 버전을 사용하려고 위치를 볼 수 있습니다

zPanelDNS.cache.dnsTitleId에 저장합니다.

캐시 된 버전이 어떤 이유로 작동하지 않습니다. 나는 콘솔 로그에 두 선택기를 작성하고 그들은 모두 대상 요소를 찾을 수 있지만 어떤 이유로 캐시 된 버전이 작동하지 않습니다. 여기

는 2의 콘솔에서 출력, 당신은

$("#dnsTitle")

가 작동하지 않습니다

zPanelDNS.cache.dnsTitleId =

[div#dnsTitle.account accountTitle, context: document, selector: "#dnsTitle", jquery: "1.9.1", constructor: function, init: function…] 

일들 ... 그들이 약간 다릅니다 볼 수 있습니다 =

[context: document, selector: "#dnsTitle", jquery: "1.9.1", constructor: function, init: function…] 

자바 스크립트가 ...

var panelDNS = { 

    unsavedChanges: false, 

    init: function() { 
    panelDNS.events(); 
    }, 


    cache: { 
    dnsTitleId: $("#dnsTitle"), 
    translation: { 
     absolute: 0, 
     relative: 0, 
     sinceDirectionChange: 0, 
     percentage: 0 
    } 
    }, 

    events: function() { 

    // Activate SAVE and UNDO Buttons when Record Row EDITED 
    $(document).on("keydown", "#dnsRecords input" ,function() { 

     // Using Selector 
     // DOES WORK 
     $("#dnsTitle").find(".save, .undo").removeClass("disabled"); 
     console.log($("#dnsTitle")); 

     // Using Cached Selector panelDNS.cache.dnsTitleId 
     // DOES NOT WORK 
     //panelDNS.cache.dnsTitleId.find(".save, .undo").removeClass("disabled"); 
     console.log(panelDNS.cache.dnsTitleId); 

    }); 

    } 

} 

$(function(){ 
    panelDNS.init(); 
}); 

Answer 1

$("#dnsTitle")는 ID 즉시 당신이 그것을 호출하는 요소를 검색하고, (찾을 경우) 요소 또는 비어있는 하나를 (없는 경우) 포장하고있는 jQuery 객체를 리턴한다. 나중에 다시 사용하려고하면 다시 쿼리하지 않습니다. 그 ID를 가진 요소는 panelDNS 객체를 생성하는 코드가 생성 될 때 존재하지 않지만, 은이 존재합니다. 이후 키를 누를 때 분명히 나타납니다.

여러 가지 이유가있을 수 있습니다. 예를 들어 코드에 대한 script 요소가 dnsTitle 요소보다 HTML 문서에서 더 높으면 그 이유가 될 수 있습니다. 요소는 문서의 해당 부분이 파싱 될 때까지 존재하지 않습니다.

예를 들어,이 청색 myElement 요소의 텍스트 켜지지 않습니다 :

<script> 
$("#myElement").css("color", "blue"); 
</script> 
<!-- ... --> 
<div id="myElement">This text will not turn blue</div> 

을하지만이됩니다

<div id="myElement">This text WILL turn blue</div> 
<!-- ... --> 
<script> 
$("#myElement").css("color", "blue"); 
</script> 

이것은 당신이 좋은이 없다면, 많은 이유 중 하나입니다 이유가 없다면 </body> 태그 바로 앞에 script 요소를 문서의 하단에 넣어야합니다. 이는 YUI Best Practices 및 Google Closure Library 팀의 추천입니다.

---

그 코드와 다른 몇 가지 문제가 있었다, 당신이 events 정의 된 구문 오류가 있고, 당신이 상호 교환 PanelDNS 및 panelDNS를 사용하고 있지만, 자바 스크립트는 대소 문자를 구분하고 그래서 그들은 것을하지 이상 같은 것이 아닙니다.여기

는 **** 인라인 주석을 참조, 내가 눈치 다른 문제 이상 및 수정 기술의 변화와 그 코드입니다 :

var panelDNS = { 

    unsavedChanges: false, 

    init: function() { 
    // **** Removed unnecessary second `ready` call 

    // **** Get the element here 
    panelDNS.cache.dnsTitleId = $("#dnsTitle"); 

    // **** Call the `events` function to hook events 
    panelDNS.events(); 

    // (Instead of `panelDNS` above, you could use `this`, but since you 
    // only have one `panelDNS` object, it's simpler to use that) 
    }, 


    cache: { 
    // **** Removed dnsTitleId here 
    translation: { 
     absolute: 0, 
     relative: 0, 
     sinceDirectionChange: 0, 
     percentage: 0 
    } 
    }, 

    events: function() { // **** Made this a function 

    // Activate SAVE and UNDO Buttons when Record Row EDITED 
    $(document).on("keydown", "#dnsRecords input" ,function() { 

     panelDNS.cache.dnsTitleId.find(".save, .undo").removeClass("disabled"); 
    }); 

    } 

} 

$(function(){ 
    panelDNS.init(); 
});