Как применить те же правила, которые определены в файле JS, содержащем все правила в document.ready (..), к новым сообщениям?

Question

Как применить те же правила, которые определены в файле JS, содержащем все правила в document.ready (..), к новым сообщениям?

0

У меня есть простой 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;
});

Я хочу, чтобы этот тип правил применялся к новым сообщениям, которые я отправляю.

crowdfun 20 сен. 2013, в 16:22

Источник

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

foxxtrot · Accepted Answer · 2013-09-20T13-12-00.000Z

Событие 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 делает это автоматически). Конечный результат? Вы привязываете гораздо меньше обработчиков событий, так как вы не украшаете каждый пост отдельно.