Question

我使用的是这里看到的确切代码：

http://gazpo.com/downloads/tutorials/html5/contentEditable/

如您所见，单击灰色框时会出现保存按钮但是在页面加载后在我自己的网站上使用这个确切的代码后或刷新后显示保存按钮。点击某处后点击它被隐藏的屏幕（灰色框除外）。

有人能想出它最初出现的原因吗？

我对jquery很新。

我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
   <script>
    $(document).ready(function() {

    $("#save").click(function (e) {         
        var content = $('#editable').html();    

        $.ajax({
            url: 'save.php',
            type: 'POST',
            data: {
            content: content
            },              
            success:function (data) {

                if (data == '1')
                {
                    $("#status")
                    .addClass("success")
                    .html("Data received successfully.")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
                else
                {
                    $("#status")
                    .addClass("error")
                    .html("An error occured, the data could not be saved")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
            }
        });   

    });

    $("#editable").click(function (e) {
        $("#save").show();
        e.stopPropagation();
    });

    $(document).click(function() {
        $("#save").hide();  
    });

});

  </script>

  <body>

                                    <div id="status"></div>
                <div id="content3">
                <div id="editable" contentEditable="true">
                Lorem ipsum dolor sit amet...
                </div>
                <button id="save">Save</button>
                </div>
</body>

CSS：

#status{
display:none;
margin-bottom:15px;
padding:5px 10px;
border-radius:5px;
}

#save{
display: none;
margin: 5px 10px 10px;
}

#content3{
    background: #f7f7f7;
    border-radius: 10px;
}

添加覆盖样式解决了问题......只是不确定为什么css没有完成这项工作

    <button id="save" style="display:none;">Save</button>

Answer 1

快速检查告诉我，在JQuery甚至得到它之前，该按钮的默认CSS样式为display:none;。这种风格来自文件的负责人。

单击页面上的某个位置后，JQuery会触发，将display:none;或display:inline;应用于该按钮，具体取决于单击的目标。这将添加到元素本身的style属性中，从文档头覆盖样式。

作为旁注，这通常是为了防止元素在任何Javascript有机会运行和隐藏之前短暂出现在屏幕上。

Answer 2

嗯..我没有一直读到你的问题。遗憾。

修改

我在这里发布最终答案是为了避免第三次被投票... 链接中提供的原始代码具有应用于保存按钮显示的css样式：无;

在您的代码中（至少您提供的内容），您的保存按钮没有应用任何CSS样式，因此最初它会显示出来。

页面加载或刷新时显示/隐藏问题

2 个答案: