将 HTML 代码转换为 Javascript 函数

Question

我正在修改这个 codepen code，因为我想用 Firebase 数据填充 UI。

HTML正文内部

<div class="container positions">
<h2>Job Openings</h2>
<ul>
<li class="pos-card" id="pos_1">
</li>
</ul>
</div>
<div class="return">Return to listings   </div>
<div class="container refer-card" id="jobapp">
</div>



  <script>
  var jobTitle = document.getElementById('jobTitle');
  var jobDescription= document.getElementById('jobDescription');

   firebase.auth().onAuthStateChanged((user) => {
  if (user) {
        database = firebase.database();

       var ref = database.ref('/Jobs/');
    ref.on('value', gotData,  errData);

  }
  })

   function gotData(data) { 

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

  var container = document.getElementById('pos_1'); 

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

<li class="pos-card" id="pos_1">
      <div class="content">
        <div class="title new">UI/UX Designer</div>
        <div class="dept">Design</div>
        <div class="date">June 4</div>
        <div class="refer">Refer</div>
      </div>
      <ul class="desc">
        <li>6+ years’ experience designing desktop and mobile apps.</li>
        <li>Deep appreciation for simple solutions to complex problems.</li>
        <li>An amazing portfolio demonstrating successful delivery of innovative design solutions.</li>
      </ul>
     </li>
      <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>

`;
container.innerHTML += newCard;

}
}

</script>

修改后的代码如下图：

但是，与在“推荐卡”中淡出的原始代码相比，单击推荐选项卡时没有任何反应。为了更清楚，请查看 codepen 链接。当在原始代码上单击引用选项卡时，引用卡会淡入。我无法让我的代码执行此操作，并且我使用的是相同的 CSS 和 JS 文件。如何在我的循环函数中执行相同的行为？

Answer 1

您正在动态生成这些元素，因此在页面加载时应用的任何侦听器都将不可用。 将您的点击处理程序更新为：

$('.container').on('click', '.refer', function(e){
    //...
}