无法使用jQuery操作DOM元素

Question

I've run into a very strange situation. I have a simple registration form which has an input box to validate a registration. The whole site is essentially one large stylized form . In my mockup ( CodePen demo ), everything works fine. If the key matches, the input background is shaded green.

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>

Example Script

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

When I move this over to my live site, I can't access the input element with jQuery. I can find it in the DOM and edit CSS in the Inspector, but regardless of what I do, I can't even get an error message to log in the console. I have plenty of other scripts running with no problems on the page.

I'm really at a loss as to why it works in one site but not another. Any ideas are appreciated.

Answer 1

Try delegating the keyup event

$("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');
  }
});