javascript - 如何淡入div類

Question

我想在點擊操作時淡入div類。但它不起作用。

上面的圖片由功能gotData生產。

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> 

我嘗試使用下面的JS功能淡入HTML標記是指卡中的圖片時，「指」上面是點擊，但由於某些未知的原因沒有發生，並沒有顯示錯誤。你能幫我弄清楚我做錯了什麼或失蹤了嗎？

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

Answer 1

試試這個codepen（http://codepen.io/anon/pen/gmdgmv）

也許你還沒有定義jQuery的，因爲它似乎有一個樣本作業塊，我把在地方工作，而基本的CSS來隱藏你正在嘗試的元素另外，請記住，如果您在CSS中隱藏了「！important」，那麼淡入不起作用。

我添加了一個到您的點擊處理程序驗證該塊正在執行。

Answer 2

這可能是因爲您已經調用了[gotData]方法，因此在那個時候會在附加html標籤中添加'refer'類，（引用）類沒有註冊或綁定[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 
}); 

希望這有助於您的情況。