淡入（）的點擊（）淡出（）

Question

所以，我淡出元素具有與點擊（）後不工作：

$(".newpost-area, .bar-publish").click(function() { //All of this works 
    $(".function-background").fadeIn(700); 
    $(".posttypes").show(); 
}); 

但是，再點擊一下，事情發生後，我隱藏元素：

$(".ptyper-postbtn").click(function() { 
    //some ajax stuff here 

    $(".function-background").fadeOut(700, function() { //Everything here works too 
     $(".posttypes").hide(); 
     $(".p-typer").hide(); 
     $(".ptyper-posttitle").html(""); 
     $(".ptyper-postcontent").html(""); 
     $(".hash-tag-input").text(""); 
     typerPosition(); 
    }); 
}); 

但之後，.newpost-area和.bar-publish上的第一個click（）事件不再有效。即使我嘗試使用來自Chromium的開發人員工具修改.function-background元素的CSS，並將顯示屏設置爲「阻止」，它也會回到「無」值。

HTML：

從元素，這並不表明：

<div class="function-background"> 
 
    <div class="posttypes"> 
 
    <div class="p-type p-discussion"><i class="fa fa-comments"></i> 
 
     <div class="ptype-text ptext-discussion">Discussão</div> 
 
    </div> 
 
    <div class="p-type p-galery"><i class="fa fa-picture-o"></i> 
 
     <div class="ptype-text ptext-galery">Imagem</div> 
 
    </div> 
 
    <div class="p-type p-list"><i class="fa fa-columns"></i> 
 
     <div class="ptype-text ptext-list">Lista</div> 
 
    </div> 
 
    </div> 
 
    <div class="p-typer"> 
 
    <div class="topic-body"> 
 
     <div class="post-header"> 
 
     <div class="poster-avatar"> 
 
      <img src="http://i.imgur.com/rATFfDM.jpg" class="ptyper-avatar"> 
 
     </div> 
 
     <div class="poster-info"> 
 
      <div class="ptyper-user post-user"><a>Sonic_BR</a> 
 
      </div> 
 
      <div class="ptyper-timeinfo">Publicando uma <b>Discussão</b> no canal <b>Livre</b> 
 
      </div> 
 
      <div class="post-typeicon"> 
 
      <img src="http://dl.dropboxusercontent.com/u/5859176/dybb/images/text.png" alt="Tópico" title="Tópico"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="post-content"> 
 
     <div contenteditable="true" class="ptyper-posttitle feedpost-posttitle">Minha publicação</div> 
 
     <ul class="addcontent-options"> 
 
      <li class="addcontent-opt addcontent-image"><i class="fa fa-picture-o"></i> 
 
      </li> 
 
      <li class="addcontent-opt addcontent-video"><i class="fa fa-video-camera"></i> 
 
      </li> 
 
     </ul> 
 
     <div class="typer-addcontent"><i class="fa fa-plus-circle"></i> 
 
     </div> 
 
     <div class="ptyper-postcontent tfeedpost-postcontent medium-editor-placeholder" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" medium-editor-index="0" data-placeholder="Escreva algo..."></div> 
 
     <input class="ptyper-posttags" style="display: none;"> 
 
     <div contenteditable="true" class="hash-tag-input" id="hash-tag-input-1">Inserir hashtags...</div> 
 
     <div class="ptyper-options"> 
 
      <div class="ptyper-clearbtn btn btn-large btn-cancel"><i class="fa fa-trash-o"></i>Limpar</div> 
 
      <div class="ptyper-cancelbtn btn btn-large btn-cancel"><i class="fa fa-times"></i>Cancelar</div> 
 
      <div class="ptyper-postbtn btn btn-large btn-confirm"><i class="fa fa-pencil"></i>Publicar</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

使用Click事件之一：

<div class="newpost-area"><i class="fa fa-pencil-square nparea-icon"></i> 
 
    <div class="nparea-text">Publicar</div> 
 
</div>

Answer 1

你已經使用JavaScript刪除了大量的HTML，你怎麼能顯示它呢？

嘗試使用下面的代碼，它會工作

$(".newpost-area, .bar-publish").click(function() { //All of this works 
    $(".function-background").fadeIn(700); 
    //$(".function-background").show(); 
}); 

$(".ptyper-postbtn").click(function() { 
    //some ajax stuff here 

    $(".function-background").fadeOut(700, function() { //Everything here works too 
     //$(".posttypes").hide(); 
     //$(".p-typer").hide(); 
     //$(".ptyper-posttitle").html(""); 
     //$(".ptyper-postcontent").html(""); 
     //$(".hash-tag-input").text("");   
    }); 
}); 

的問題是與你：

$(".posttypes").hide(); 
$(".p-typer").hide(); 
$(".ptyper-posttitle").html(""); 
$(".ptyper-postcontent").html(""); 
$(".hash-tag-input").text("");