Я использую точный код, показанный здесь:
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>