javascript - divクラスをフェードインする方法

Question

クリック操作が行われたときにdivクラスをフェードインしたいとします。しかし、それは動作していません。

画像は、上記機能gotDataにより製造されます。私は絵に「を参照してください」ときhtmlタグにカードが参照フェードインするには、以下のJS関数を使用しようとしています

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タグで、私はこのhtmlコード

<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> 

を持っています何らかの不明な理由で何も起こらず、エラーも表示されません。私が間違っていることや逃していることを理解するのに役立つことができますか？

$('.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

これは、その時点までに '参照'クラスでhtmlタグを追加するという、[gotData]メソッドを呼び出したことが原因である可能性があります。（参照）class didnt 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 
}); 

これがあなたのケースに役立つことを願っています。