Question

我正在尝试使用jQuery显示/隐藏<div>。但问题是show和hide只能运行一次。这是我的HTML文件。

<script type="text/javascript">
$(document).ready(function(){
  $('#button1').click(function(){
    $('#show_div').html('this is div to appear<button id="button2" >two</button>');

      $('#button2').click(function(){
      $('#show_div').hide();
   });  
 });
});
</script>

<body>
  <button id="button1">one</button>
  <div id="show_div"></div>
</body>

现在当我点击按钮'一'时，'show_div'显示正常+按钮'两个'。然后，当我点击“两个”按钮时，'show_div'和按钮'two'都会消失。但是，当我再次单击“一个”按钮时，没有任何反应。

我知道解释可能很简单，但我不明白。

Answer 1

它没有显示，因为你也应该显示div。试试这个：

<script type="text/javascript">
$(document).ready(function(){
  $('#button1').click(function(){
     $('#show_div').show();
    $('#show_div').html('this is div to appear<button id="button2" >two</button>');

      $('#button2').click(function(){
      $('#show_div').hide();
   });  
 });
});
</script>

<body>
<button id="button1">one</button>
<div id="show_div"></div>


</body>

Answer 2

只需按下按钮1，您就必须显示div：

$(document).ready(function(){
  $('#button1').click(function(){
    $('#show_div').show();   // <-- here
    $('#show_div').html('this is div to appear<button id="button2" >two</button>');

      $('#button2').click(function(){
      $('#show_div').hide();
   });  
 });
});

Answer 3

insted call hide方法，清除HTML内容。

$('#show_div').html("");

Answer 4

这是因为当你点击button2时你隐藏了div #show_div，＃show_div得到了样式display：none。

当你再次点击＃button1时它会替换html，但div仍然是隐藏的。

也许试试这个，$（'＃show_div'）。show（），再次显示div

<script type="text/javascript">
  $(document).ready(function(){
    $('#button1').click(function(){

         $('#show_div').show();
         $('#show_div').html('this is div to appear<button id="button2" >two</button>');
         $('#button2').click(function(){
             $('#show_div').hide();
         });  
   });
  });
</script>

jquery第二次没有对事件做出回应

4 个答案: