javascript - jquery .live() and .append() - Stack Overflow

admin管理员组

文章数量:1312658

So I'm currently using .append() to add a feature to all of the posts on a webpage, but when additional posts are loaded on the page, the appended features aren't included in the new content — I'm trying to e up with a way to make sure all of the new content has the appended feature too.

$(this).append('<div id="new_feature></div>');

Something like this?

$(this).live().append('<div id="new_feature></div>');

Maybe there's a way to make it constantly appending in a loop perhaps?

So I'm currently using .append() to add a feature to all of the posts on a webpage, but when additional posts are loaded on the page, the appended features aren't included in the new content — I'm trying to e up with a way to make sure all of the new content has the appended feature too.

$(this).append('<div id="new_feature></div>');

Something like this?

$(this).live().append('<div id="new_feature></div>');

Maybe there's a way to make it constantly appending in a loop perhaps?

• javascript
• ajax
• jquery
• jquery-append

Share Improve this question Follow edited Jan 12, 2013 at 3:14 Lil' Bits 89822 gold badges99 silver badges2424 bronze badges asked Jan 12, 2013 at 3:02 user1115666user1115666 2

• 2 Are you aware that you have spelled append wrong in your code? – Alex W Commented Jan 12, 2013 at 3:07
• 1 This is not how .live works (check the documentation). Whenever you load new posts you have to add the features to them. – Felix Kling Commented Jan 12, 2013 at 3:08

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

There is DOMNodeInserted event:

$('button').click(function() {
  $('#appendme').append($('<div class="inner">').text(Math.random()));

})

$('#appendme').on('DOMNodeInserted','.inner',function() {
 console.log(this); 
});

DEMO

update: this seems not works in IE, try propertychnage event handler also ($('#appendme').on('DOMNodeInserted,propertychange') but i not sure, have no IE to check this right now.

update2: Domnode* seems deprecated according to mdn, they tell to use MutationObserver object instead

update3: seems here is no very crossbrowser solution for MutationEvents, see this answer, so my suggestion would be use code above, if event supported and fallback to setTimeOut or livequery option.

update4: If you depend only on .append() you can patch jQuery.fn.append() like this:

jQuery.fn.append=function() {
                return this.domManip(arguments, true, function( elem ) {
                        if ( this.nodeType === 1 || this.nodeType === 11 ) {
                                this.appendChild( elem );                             
                                $(elem).trigger('appended');
                        }
                });
        };

$('button').click(function() {
  $('#appendme').append($('<div class="inner">').text(Math.random()));

})

$('#appendme').on('appended','.inner',function() {
 console.log(this); 
});

DEMO2

may be more correct is to spoof jQuery.fn.domManip like here

jQuery documentation:

Use of the .live() method is no longer remended since later versions of jQuery offer better methods that do not have its drawbacks.

You can use setTimeout() function that can check for new <div>s every n milliseconds.

$(function(){
    setInterval("Check4NewDivs();",1000);
});

So say this is a div with class="ment newdiv", so when it appears on the page for the first time, it has the class newdiv that will let the function know it was just dynamically created.

function Check4NewDivs(){
    $(".ment .newdiv").each(function(){
        $(this).append('<div class="new_feature"></div>').removeClass("newdiv");
    });
}

It's append not appened.
live is a deprecated event handler. It's not used this way. use on instead. http://api.jquery./live/

So, the following code will run when you click selector.

$(document).on('click', 'selector', function() {
    $(this).append('<div id="new_feature></div>');
});

No, there is no standard way to do it like that. There was a proposal of the events that would be fired whenever the DOM elements are inserted etc., but you cannot rely on that.

Instead rely on either:

• (preferably) callbacks - just invoke function ensuring existence of such appended snippets, whenever you pull something (but after you successfully pull it from server and insert into DOM, not sooner), or
• constant checks - like using in setInterval() or setTimeout(), but this would be unnecessary processing and you will never get instant append, unless you will perform processing-heavy checks all the time,

use the on load function:

$(item).on('load',function(){
    $(this).append('<div id="new_feature"></div>');
});

This will add append the item as a callback once the item has been loaded. I would also choose some sort of dynamic ID creator rather than always append stuff with the same ID, but thats just me.

you must bind to an element that already exists on the page. i have written an example where i make appended content live.

DEMO on JSFiddle

HTML

<div id="container">
  <div id="features">
  </div>
  <br />
  <a href='#' id='clickme'>click me to add feature</a>
</div>

JS

$(function() {
  $('#clickme').on('click', function(e) {
    $('#features').append('<div class="new_feature">new feature</div>');
  });

  $('#features').on('click', '.new_feature', function() {
    alert('i am live.');
  });
});

本文标签： javascriptjquery live() and append()Stack Overflow