javascript - 先前隐藏的 div 上的按钮不起作用

Question

我的程序有 2 个带按钮的 div，一个隐藏，另一个显示。当我点击显示的 div 按钮时，它会切换这 2 个 div，首先隐藏并显示第二个。但是第二个按钮不会像第一个 div 的按钮那样与同级 div 上的元素交互，即使代码完全相同。 (html)

<div class="first_two_guesses">
  <input type="text" class="guess" id='first_guess' placeholder="first guess">
  <input type="text" class="guess" id='second_guess' placeholder="second guess">      
  <button type='button' class="btn-add">Submit</button>
</div>
<div class='word_guesses' style='display: none;'>
  <input type='text' class='guess' id='word_or_letter' placeholder='letter or word'>
  <button type='button' class='btn-guess'>Submit</button>
</div>

(jquery)

$('.btn-add').on('click', function(){   
   ... do someting ...
  $('.first_two_guesses').hide();
  $('.word_guesses').show();
}

$('.btn-guess').on('click', function(){   
  ... do the same thing ...
}

Answer 1

您现在可以使用 .on()方法。通过将委托(delegate)事件附加到运行 jQuery 时在 HTML 中可见的元素。

所以如果在jQuery运行的时候a.someClass是隐藏的，你应该给body附加一个委托(delegate)事件，这样以后当有一个可查看的a.someClass元素时它就会运行，例如:

$('body').on('click','input.a.someClass',function(){
  alert("test");
});