無法使用jQuery操作DOM元素

Question

我遇到了一個非常奇怪的情況。 我有一個簡單的注冊表格，其中包含一個用於驗證注冊的input框。 整個站點實質上是一種大型的程式化form 。 在我的模型（ CodePen demo ）中，一切正常。 如果鍵匹配，則輸入背景為綠色陰影。

的HTML

<div id="workshops">
  <h1>Upcoming Workshops</h1>
  <p>To register for a workshop, fill in your name information and then click on the button next to each session title. Click <b>Register</b> when you're finished.</p>
  <div id="form">
    <form id="classSignup" class="noSubmit" onsubmit="handleFormSubmit(this)">
      <input id="email" name="email" type="hidden" value="<?= Session.getActiveUser().getEmail(); ?>" />
      <input id="first" name="first" type="text" onfocus="this.value=''" value="First Name" required />
      <input id="last" name="last" type="text" onfocus="this.value=''" value="Last Name" required />
      <select id="bldg" name="building"></select>
      <input type="submit" value="Register" />
      <div id="list">
        <div class='row' id='row9'>
          <span class='time'>8:00</span>
          <span class='date'>6/20/2017</span>
          <input type='checkbox' name='wkshp' value='6/20/2017'/>
          <span class='title'>
            <label for='wkshp'>Demo workshop</label>
          </span>
          <span class='desc'>This is the class description</span>
          <div class='meta'>
            <span class='loc'>Admin building</span> | 
            <span class='cat'>1a, 2b, 2c, 3d</span> | 
            <span class='type'>Online</span> | 
            <span class='seats'>Seats: 15</span>
          </div>
          <label>
            <input type='text' class='lock' name='regCode9' value='Code' />
          </label>
        </div>
      </div>
    </form>
  </div>
</div>

示例腳本

$("div.lock").keyup(function() {
  if( $(this).val() == "abc") {
    $(this).css('background-color', 'rgba(0, 255,0,0.4)')
  } else {
    $(this).css('background-color', 'white')
  }
})

當我將其移至實時站點時，無法使用jQuery訪問input元素。 我可以在DOM中找到它，並在Inspector中編輯CSS，但是無論我做什么，我什至都無法獲得錯誤消息來登錄控制台。 我還有許多其他腳本在頁面上正常運行。

我真的不知道為什么它可以在一個站點而不是另一個站點工作。 任何想法表示贊賞。

Answer 1

嘗試委派keyup事件

$("body").on("keyup","input.lock", function() {
  if( $(this).val() == "abc") {
    $(this).css('background-color', 'rgba(0, 255,0,0.4)');
  } else {
    $(this).css('background-color', 'white');
  }
});