在FadeOut()之后单击()的FadeIn()不起作用

时间:2016-02-26 01:25:13

标签: javascript jquery click fadein fadeout

所以,我点击了一个带有click()的元素:

$(".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>

1 个答案:

答案 0 :(得分: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("");