javascript - FadeIn() 和 click() 在 FadeOut() 之后不起作用

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>

使用点击事件的:

<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("");