핸들 막대 템플릿 내에서 DOM 요소에 액세스

이것은 내가 만들어내는 것보다 간단해야합니다. 무슨 일이 일어나고 있는지 잘 모르겠다.핸들 막대 템플릿 내에서 DOM 요소에 액세스

저는 Handlebar 템플릿을 "채우고있는"DIV를 가지고 있습니다. 템플릿이 생성되면 jQuery slideDown을 사용하여 패널을 열어 내용을 봅니다. 이제 DIV를 밀어 올리려면 밀착 기능을 넣어야합니다.

a.close 요소가 스크립트 태그 내에 있기 때문에 문제가 클릭 기능이 바운드되지 않는다고 생각합니다.

이

<div id="characteristic" style="bottom:0px; width:800px; display:none; position:fixed; left: 350px;"></div>

여기에 jQuery를 조각입니다 :

다음은 콘텐츠에 대한 DIV이다. 그래 난이 오래된 질문 알고

<script id="ac-template" type="text/x-handlebars-template"> 
    <div class="holder" style="background-color:#FFFFFF;"> 
     <div class="frame"> 
      <div class="content"> 
       <div class="info-box-holder"> 
        <a class="close" href="">&times;</a> 
        <div class="heading"> 
         <h2>ACTIONABLE CHARACTERISTIC</h2> 
        </div> 
        <div class="info-box"> 
         <a href="#"><img class="alignleft" src="{{image_large}}" alt="" width="400" height="400" /></a> 
         {{#if subcategory_name}} 
          <h2>{{subcategory_name}}: {{name}}</h2> 
         {{else}} 
          <h2>{{category_name}}: {{name}}</h2> 
         {{/if}}

출처

2012-04-23 spdaly

특성 ID는 어디에 있습니까? – Amberlamps

템플릿이 렌더링 된 후 ready 함수에있는 코드를 실행해야 할 수도 있습니다. 컨트롤이 onload 중에 존재하지 않을 수 있습니다. –

@Amberlamps DIV 코드를 추가했습니다. – spdaly

당신은 아마 이미 대답을했다,하지만했습니다

$(document).ready(function(e){ 
    $("a.close").click(function(e) { 
    e.preventDefault(); 
    $("#characteristic").slideUp(); 
    }); 
});

그리고 템플릿의 조각 : 이것은 HTML의 상단에 JS 코드가 실행될 때 a.close이 DOM에 없기 때문입니다.

핸들 막대가 템플릿 렌더링을 마친 후에 JS 코드를 실행하거나 페이지로드에있는 상위 DOM 요소 (일종의 컨테이너)에 바인딩 한 다음 원하는 링크에 대해서만 활성화해야합니다. . 이 같은 것 (see the API) :

$(document).ready(function(e){ 
    $("#mycontainerdiv").on('click', 'div.info-box-holder a.close', function(e) { 
    e.preventDefault(); 
    $("#characteristic").slideUp(); 
    }); 
});

출처

2012-05-02 00:02:01

핸들 막대 템플릿 내에서 DOM 요소에 액세스

답변

관련 문제