У меня есть несколько функций jquery в документе document.ready, и я использую метод on() для создания этих функций для "загрузки большего количества" и добавления нового сообщения в список фидов.
Тем не менее, я не могу скрыть нижний колонтитул при загрузке нового сообщения. Он работает при первой загрузке страницы (через document.ready), но не для новых сообщений. Я уже пробовал напрямую через CSS, и он работает, и я добавляю новый пост. Однако, когда я нажимаю на поле textarea (что вызовет отображение нижнего колонтитула), это не сработает.
Что вы порекомендуете? есть способ, использующий метод ON()?
Код JS
$(document).ready(function(){
$(".footer").hide();
$(".comments-feed").hide();
$('ol.list-feed').on('click', '.small-textarea-main-feed', function () {
$(this).addClass("set-large");
//$(this).("footer-post").show();
$(this).next().find('button#cenas').prop('disabled', $(this).val() == '');
$(this).next('div.footer').slideDown("fast");
$(this).next('.comments-feed').slideToggle('200');
});
$('ol.list-feed').on('keyup', '.set-large', function () {
$(this).next().find('button#cenas').prop('disabled', $(this).val() == '');
});
$('ol.list-feed').on('focusout', '.small-textarea-main-feed', function(){
if ($(this).val() !== '') {
}
else {
$(this).removeClass("set-large");
$(this).siblings('div.footer').hide();
$(".comments-feed").hide();
}
});
$('ol.list-feed').on('click', 'button#cancel', function () {
$(this).parents('.footer').hide();
$(this).parents('.footer').siblings('.small-textarea-main-feed').removeClass('set-large');
$(this).parents('.footer').siblings('.small-textarea-main-feed').val('');
});
});
HTML-часть сообщения
Когда я сначала загружаю страницу (document.ready), она делает то, что я хочу, с (.footer).hide(). Однако, когда я добавляю сообщение (есть форма для этого - очень простое), он загружает сообщение в фид и не скрывает нижний колонтитул (код ниже). Как я уже сказал, я попробовал изменить курс нижнего колонтитула, используя "display: none"; хотя он влияет на все сообщения.
<div id="" class="footer-condensed">
<textarea class="small-textarea-main-feed" type="text" placeholder="Reply to @Gerardo"></textarea>
<div id="" class="footer-post">
<div id="" class="footer-submit-button" style:"display:none;">
<button type="button" id="cancel" class="btn" onclick="cancel_button();" >Cancel</button>
<span id="footer-btn-margin"></span>
<button type="button" id="hunch" class="btn btn-info">Hunch</button>
</div>
</div>
</div>
JS для погрузки сообщений (да, я пытался использовать метод hide() здесь, но не работает - это комментарий)
$('form.cenas').submit(function() {
//
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
//event.preventDefault();
$.ajax({
url: url,
type: type,
data: data,
cache: false, // it will force requested pages not to be cached by the browse
success: function(html){
console.log(html);
$("ol#list-feed").prepend(html);
$("ol#list-feed li:first").slideDown(600);
//$("ol#list-feed > li.footer").hide();
//$("li.comments-feed").hide();
document.getElementById('set-width1').value='';
document.getElementById('tags').value='';
if ($("ol#list-feed > li").size() <= 3) {
$('#loadmorebutton').hide();
} else {
$("ol#list-feed > li:last").remove();
$('#loadmorebutton').show();
}
}
});
//event.preventDefault();
return false;
});
Я все еще не совсем уверен, насколько я понимаю структуру вашей страницы, но я думаю следующее:
Если это правильно, вы можете исправить его, обновив обработчик succes следующим образом:
success: function(html){
console.log(html);
//Create a jquery object from the returned html
var newPost = $(html);
//Hide the footer in the new post.
$('.footer', newPost).hide();
//Add the new post
$("ol#list-feed").prepend(newPost);
$("ol#list-feed li:first").slideDown(600);
//$("ol#list-feed > li.footer").hide();
//$("li.comments-feed").hide();
document.getElementById('set-width1').value='';
document.getElementById('tags').value='';
if ($("ol#list-feed > li").size() <= 3) {
$('#loadmorebutton').hide();
} else {
$("ol#list-feed > li:last").remove();
$('#loadmorebutton').show();
}
}