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

Question

这有点疯狂，我不确定出了什么问题。我想让一个 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>

Answer 1

您需要使用以下命令来阻止 .cancel 上的 click 冒泡以及 .wrapper 上的点击 .stopPropagation()，如下所示：

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

您可以在这里测试。当前发生的情况是您将其隐藏，但随后 .wrapper 点击处理程序获得点击并立即再次显示 .inner2。