单击可显示和隐藏子DIV的父DIV在jQuery中有问题

这有点疯狂，我不确定到底出了什么问题。我想使一个DIV可以单击以显示/隐藏子DIV。但一旦我隐藏了一个孩子，我就无法解开它

这是我的全部代码。谢谢你的帮助。在下面的示例中，单击“取消”按钮时无法取消隐藏inner1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

<div class="wrapper">
    <div class="inner1">
    1
    </div>

    <div class="inner2" style='display:none'>
    2 <input type='button' value='cancel' class='cancel'>
    </div>

</div>


<style>
div {border:1px solid red;}
</style>

<script>
$(document).ready(function() { 
        $('.wrapper').live("click", function(){
            $('.inner1').hide();
            $('.inner2').show();
        });


        $('.cancel').live("click", function(){
            $('.inner1').show();
            $('.inner2').hide();
        });
});
</script>

1.
2.
div{边框：1px实心红色；}
$（文档）.ready（函数（）{
$（'.wrapper'）.live（“单击”，函数（）{
$（'.inner1'）.hide（）；
$（'.inner2'）.show（）；
});
$（'.cancel'）.live（“单击”，函数（）{
$（'.inner1'）.show（）；
$（'.inner2'）.hide（）；
});
});

您需要停止

上的
点击
。取消
冒泡，也可以点击
.wrapper
，方法如下：

$('.cancel').live("click", function(e){
  $('.inner1').show();
  $('.inner2').hide();
  e.stopPropagation();
});

。当前发生的情况是您正在隐藏它，但随后，
.wrapper
单击处理程序获得单击，并立即再次显示
.inner2
。
经过进一步思考，我决定改为使内部div可单击。现在你已经向我解释了发生了什么，让主div可点击带来了很多挑战。谢谢分享。@Scott-这对我来说也是一个更好的解决方案，为按你想要的方式得到它干杯：）