以前隱藏的div上的按鈕不起作用

Question

我的程序有兩個帶按鈕的div，一個隱藏，另一個顯示。 當我點擊顯示div的按鈕時，它會切換這兩個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

您忘記在代碼中放置結束括號（ ) ）。 見下文：

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> 

Answer 2

使用jQuery .toggle（）函數切換html元素的可見性。

$('.btn-add').on('click', function(){   
  $('.first_two_guesses').toggle();
  $('.word_guesses').toggle();
});

$('.btn-guess').on('click', function(){   
  $('.first_two_guesses').toggle();
  $('.word_guesses').toggle();
});

Answer 3

您現在可以使用.on（）方法。 通過將委托事件附加到運行jQuery時可在HTML中查看的元素。

因此，如果在運行jQuery時隱藏了a.someClass，則應該將委托事件附加到正文，因此它將在以后存在可查看的a.someClass元素時運行，例如：

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

Answer 4

見演示 。

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

$('.btn-guess').on('click', function(){   
 // ... do the same thing ...
   $('.first_two_guesses').show();
  $('.word_guesses').hide();
});

我已經編輯了您的問題，我理解您的問題就像您想要在兩次按鈕點擊之間切換一樣。 嘗試將ID選擇器與您的元素一起使用。 ID可用於標識一個元素，而類可用於標識多個元素