javascript-如何淡入div类

我想在执行单击操作时淡入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;

}
}

试试这个代码笔（）

也许您还没有定义jQuery，因为它似乎与我放置的示例作业块一起工作，并使用基本CSS隐藏您试图淡入的元素。另外，请记住，如果你用“！重要提示：在CSS中，淡入将不起作用

---

我添加了一个

console.log（'clicked'）到您的点击处理程序，验证块是否正在执行。
这可能是因为您调用了[gotData]方法，该方法会将html标记附加到正在使用的'Referer'类，因此，此时，（refer）类在加载DOM后没有注册或绑定[click]事件处理程序

在这种情况下，需要使用（on）或（delegate）方法预先附加/绑定它们（如果希望在jQuery中应用此方法）

使用（on）方法：

使用（委托）方法：

希望这对您的案例有所帮助。
您有什么样的CSS？我已经设置了要测试的，但是我没有示例作业或CSS来隐藏返回链接。您可能没有定义查询，也可以确保您已经在$（document）.ready（）@TejPatil中编写了语句。我定义了查询。用$（document）.ready（）编写语句是什么意思？脚本可能在呈现.refer元素之前执行。在$（document）.ready（function（）{….}）中编写代码将确保在文档准备好html后执行脚本-我尝试了这两种方法，但都没有成功。谢谢你的帮助though@Ola你是否检查了（控制台）窗口以查看你的JS中是否有错误？是的，我检查了，但显示了错误。使用的代码低于$（'.refere'）。在（'click'，函数（事件）{$（'.positions'）.addClass（'fadeOut'）；$（'.referecard'）。addClass（'show'）；$（'.return'）。fadeIn（'fast'）；}）；您在控制台上收到了什么消息？请尝试检查[console]窗口上的[Network]选项卡，查看调用这些事件/方法（getData）的脚本是否已正确加载。
<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');
});

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

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