如何将JS文件中定义的相同规则（包含document.ready（..）中的所有规则）应用于新帖子？

Question

I have a simple JS file that uses Jquery to apply rules to the loaded page.

I starts with the traditional $(document).ready(function(){

Nevertheless, when I load more posts (load more button) or submit a new post, those rules don't apply. I think I understand why...though it is not clear.

Is there a way to apply the same rules to each new added post? Is the only way defining events directly on the html code like eg onclick....?

I may be a very simple question. I'll appreciate any answers :)

Thanks

JS Code

    $(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

I am using the following code in load_questions.js to load a new post:

    $('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;
});

I want that this type of rules apply to new posts I submit.

Answer 1

The DOMDocumentReady event fires exactly once on the page, when the entire HTML document has been loaded and parsed, so any DOM element you should be able to expect be on the page, will be.

Any DOM elements you add to the page from this point on, need to be decorated again. This can be as simple as calling the DOMDocumentReady handler again, in which case you'd want to make it a named function, and pass that named function to $(document).ready(...) . Something like this:

var onReadyHandler = function() { };
$(document).ready(onReadyHandler);
$.ajax({
   success: function(html) {
      $("ol#list-feed").prepend(html);
      onReadyHandler();
   }
});

Now, it's likely that a better way of handling this (it's really unclear to me what precisely you're trying to accomplish, but that's not a real problem), is to not bind anything to your new posts at all. If you're concerned about events, bind the events to the container you know will be on the page, using 'event delegation' (jQuery link: http://api.jquery.com/delegate/ ). This pattern takes advantage of the fact that events 'bubble' in the DOM, meaning you can listen higher in the DOM then the elements you actually want to respond to, and just check that the click event happened on the event you do care about ($.delegate does this check automatically). The end result? You bind far fewer event handlers, since you're not decorating each post individually.