javascript - div 클래스에서 페이드하는 방법

Question

클릭 동작이 발생하면 div 클래스를 페이드 상태로 유지하려고합니다. 하지만 작동하지 않습니다.

화상 위 gotData 함수에 의해 생성된다. 동일한 파일 HTML 태그의

function gotData(data) { 

var jobs = data.val(); 
var keys = Object.keys(jobs); 

var container = document.getElementById('Jobcontainer'); 
var container2 = document.getElementById('jobpackage'); 


for (var i = 0; i<keys.length; i++) { 
var k = keys[i]; 
var newCard = ` 

<li class="pos-card" id="Jobcontainer"> 
    <div class="content"> 
     <div class="title">`+jobs[k].JobTitle+`</div> 
     <div class="date">April 21</div> 
     <div class="refer">Refer</div> 
    </div> 
    <ul class="desc"> 
    <li>`+ jobs[k].JobSummary + `</li> 
    </ul> 
</li>`; 

container.innerHTML += newCard; 

} 
} 

나는 그림에서 "참조"때 페이드 인 html 태그에 카드를 참조 아래의 JS 기능을 사용하려고 시도하고

<div class="return">Return to listings </div> 
<div class="container refer-card"> 
<div class="modal confirmed"><span class="close-modal"></span> 
<h2>Thank you!</h2> 
<p><span id="refer_name" class="focus"></span> has been submitted for the <span id="refer_pos" class="focus"></span> position.</p> 
</div> 
<div class="sign-up card"> 
<div class="card__header"> 
    <h1>Employee Referral</h1> 
    <div class="description">For more information, please consult the <a href="#">employee handbook</a>.</div> 
</div> 
<div class="card__content"> 
    <form class="referral" method="post"> 
    <div class="field line"> 
     <input class="req" maxlength="240" type="text" name="name" value="" required="required" id="name"/> 
     <label class="placeholder" for="name">Full Name</label> 
    </div> 
    <div class="field line"> 
     <input class="req" maxlength="240" type="email" name="email" value="" required="required" id="email"/> 
     <label class="placeholder" for="email">Email</label> 
    </div> 
    <div class="field line inline"> 
     <input class="req" maxlength="240" type="text" name="position" value="" required="required" id="position"/> 
     <label class="placeholder" for="position">Position</label> 
    </div> 
    <!-- <div class="field inline right"><span class="dropdown-wrapper"> 
     <select class="empty" name="department" id="choice"> 
      <option value="" selected="selected">Department</option> 
      <option value="1">Development</option> 
      <option value="2">Sales</option> 
      <option value="3">QA</option> 
      <option value="4">Design</option> 
      <option value="5">HR</option> 
      <option value="6">Research </option> 
     </select></span></div> --> 
    <div> 
     <input type="submit" value="Submit" disabled="disabled" id="btn"/> 
    </div><a class="reset" href="#">Reset </a> 
    </form> 
    </div> 
    </div> 
    </div> 

이 html 코드를이 위의 클릭 한 있지만 일부 알 수없는 이유로 아무것도 일어나지 않으며 오류가 표시됩니다. 내가 뭘 잘못하고 있었는지 알아낼 수 있습니까?

$('.refer').click(function(e){ 
e.stopPropagation(); 
$('.positions').addClass('fadeOut'); 
$('.refer-card').addClass('show'); 
$('.return').fadeIn('fast'); 
}); 

Answer 1

내가이 자리에 샘플 작업 블록에서 작동하도록 보인다, (http://codepen.io/anon/pen/gmdgmv)

이 아마도 당신이 jQuery를 정의하지 않은이 codepen을 시도하고 기본 CSS 당신이하려고하는 요소를 숨기려면 페이드 인 할 수 있습니다. 또한 CSS에서 '! important'로 숨기면 페이드 인이 작동하지 않습니다.

클릭 핸들러에 을 추가하여 블록이 실행 중인지 확인하십시오.

Answer 2

'refer'클래스와 함께 html 태그를 추가 할 수있는 [gotData] 메소드를 호출했기 때문일 수 있습니다.이 경우 (참조) 클래스가 did not register를 등록하거나 [click] 이벤트 핸들러를 바인딩합니다. 이 경우, DOM

를로드 한 후, 당신은 (당신이 jQuery를이을 적용 할 경우) 방법 (에) 사용은 사전에 사용 (에) 또는 (위임) 방법

를 결합/부착해야합니다

$('.refer').on('click', function(event) { 
    $('.positions').addClass('fadeOut'); 
     // rest of code 
}); 

(위임) 방법 사용 :

$(document).delegate('.refer', 'click', function(event) { 
    $('.positions').addClass('fadeOut'); 
    // rest of code 
}); 

귀하의 사례에 도움이되기를 바랍니다.