У меня есть простой JS файл, который использует JQuery для применения правил к загруженной странице.
Я начинаю с традиционного $(document).ready(function(){
Тем не менее, когда я загружаю больше сообщений (загружать больше кнопки) или отправляю новое сообщение, эти правила не применяются. Думаю, я понимаю, почему... хотя это не ясно.
Есть ли способ применить одни и те же правила к каждому добавленному сообщению? Единственный способ определить события непосредственно в html-коде, например, onclick....?
Я могу быть очень простым вопросом. Буду признателен за любые ответы :)
благодаря
Код JS
$(document).ready(function(){
(...)
$('button#cancel').on('click',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('');
});
(...)
}); closes all
Я использую следующий код в load_questions.js для загрузки нового сообщения:
$('form.ajax').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);
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;
});
Я хочу, чтобы этот тип правил применялся к новым сообщениям, которые я отправляю.
Событие DOMDocumentReady запускается ровно один раз на странице, когда весь HTML-документ загружен и проанализирован, поэтому любой элемент DOM, который вы должны ожидать, будет на странице.
Любые элементы DOM, которые вы добавляете на страницу с этого момента, должны быть снова оформлены. Это может быть так же просто, как снова вызвать обработчик DOMDocumentReady, и в этом случае вы хотите сделать его именованной функцией и передать эту именованную функцию в $(document).ready(...)
. Что-то вроде этого:
var onReadyHandler = function() { };
$(document).ready(onReadyHandler);
$.ajax({
success: function(html) {
$("ol#list-feed").prepend(html);
onReadyHandler();
}
});
Теперь, скорее всего, лучший способ справиться с этим (мне действительно непонятно, что именно вы пытаетесь выполнить, но это не проблема) заключается в том, чтобы вообще ничего не связывать с вашими новыми сообщениями. Если вас беспокоят события, привяжите события к контейнеру, который, как вы знаете, будет на странице, используя "делегирование событий" (ссылка jQuery: http://api.jquery.com/delegate/). Этот шаблон использует тот факт, что пузырь событий в DOM, что означает, что вы можете слушать выше в DOM, а затем те элементы, на которые вы действительно хотите реагировать, и просто убедитесь, что событие щелчка произошло в событии, о котором вы заботитесь ( $.delegate делает это автоматически). Конечный результат? Вы привязываете гораздо меньше обработчиков событий, так как вы не украшаете каждый пост отдельно.