恢复到以前的状态jQuery中

Question

这是通过计算器:)创建

<table border="2" class="table"> 
    <tr> <td class="clicked">aaa </td> <td class="clicked">bbb </td> </tr> 
    <tr> <td class="clicked">ccc </td> <td class="clicked">ddd </td> </tr> 
</table> 

<table border="2" class="tablehide"> 
    <tr> <td> 111</td> </tr> 
    <tr> <td> 222</td> </tr> 
</table> 


$(".clicked").live('blur', function() { 
    $(".clicked").find('.tablehide').remove(); 
}); 

$(".clicked").live('click', function() { 
    $(".clicked").find('div:first').show(); 


    $(this).wrapInner('<div class="hide">'); 
    $(this).find('div:first').hide() 
    $(this).prepend($('.tablehide')); 
    $('.tablehide td').show(); 
    }); 

活生生的例子：http://jsfiddle.net/5neff/7/

我怎么能修改此 - 我想，如果我点击以外的表，则表返回以前的状态 - AAA BBB CCC DDD

Answer 1

代替live使用delegate，并贴在document点击处理程序的状态显示重置下面的代码。在您的代码中，即使您的代码已经打包，您也始终使用<div class="hide">包装td内容。我在我的代码中也照顾到了这一点。

工作demo

$(".table").delegate('.clicked', 'click', function(e) { 
    $(".clicked").find('div:first').show(); 
    if($(this).find(".hide").length == 0){ 
     $(this).wrapInner('<div class="hide">'); 
    } 
    $(this).find(".hide").hide(); 
    $(this).prepend($('.tablehide').show()); 
    $('.tablehide td').show(); 
    e.stopPropagation(); 
}); 

$(document).click(function(){ 
    $(".table").find("div.hide").show(); 
    $(document.body).append($(".table").find(".tablehide").hide()); 
}); 

Answer 2

捕获像点击外面的盒子是硬的事件，所以我做了一个复位按钮：

$('#reset').click(function(event) { 
    $(".tablehide td").hide(); 
    $(".clicked div").show(); 
}); 

jsFiddle