1

So I am using endless scrolling, and when I have scrolled x amount of pixels there will be added new objects to the page. But how can I use jQuery to check if a new element (class or id) is added to the page?

(I want to check this, because if a new element is added I want to do some jQuery on the new element).

allegutta
  • 5,626
  • 10
  • 38
  • 56
  • Do you mean a new element added dynamically on to the page? – PSL Jun 22 '13 at 01:33
  • Did my answer not help you? – Kylie Jun 22 '13 at 01:45
  • 1
    @allegutta In that case do you have control over when the element is added on to the page. Also have a look at mutation observer. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver – PSL Jun 22 '13 at 01:47
  • @KyleK seems like OP is looking for a way to detect a new element added on to the page dynamially – PSL Jun 22 '13 at 01:47
  • Isn't your own code responsible for dynamically adding elements? – jahroy Jun 22 '13 at 02:08

1 Answers1

7

Just use .length, to check if it exists, after an append()

$('#elemId').length;

Like so...

if($('#elemId').length > 0){ //your code here };

Or write your own function....

jQuery.fn.Exists = function(){
    return jQuery(this).length > 0;
};

Then use it to return true or false...

if($('#elemId').Exists()){ //your code here };

Or you can use the livequery() plugin...

$('#elemID').livequery(function()
{
// do things here like binding new events and stuff.
// this function is called when an object is added.
// check the API for the deletion function and so on.
});

I can't seem to find the plugin anymore, on the jQuery website, but it did exist at one point

You can also try DOMNodeInserted...

$(document).bind('DOMNodeInserted', function(e) {
console.log(e.target, ' was inserted');
});

You can use on()....if your selector will always be the same...

So for instance, say as you scroll you're always adding a new div called class="newDiv"....

Then the jquery you want to perform....if you want to bind an event to click...

$(document).on( 'click', '.newDiv', function(){ //your code here
 });
Matt Browne
  • 12,169
  • 4
  • 59
  • 75
Kylie
  • 11,421
  • 11
  • 47
  • 78
  • hmmm i have heard about livequery. Probably take a look at mutation observer the link i posted in the orignal comment and this one i answered a while back. http://stackoverflow.com/questions/16990573/how-to-bind-bootstrap-popover-on-dynamic-elements/16991216#16991216 – PSL Jun 22 '13 at 01:52
  • DOMNodeINserted is mutation event and it is deprecated. – PSL Jun 22 '13 at 01:52
  • `on()` is probably your best bet in this case. It works by taking advantage of event bubbling. – Matt Browne Jun 22 '13 at 02:13
  • @MattBrowne `on()` is for binding the events, but he want to apply something on the element created dynamically. proabably like applying a plugin or something... – PSL Jun 22 '13 at 02:31
  • @KyleK Yes, if he just wants to bind events, but if you want to apply a plugin on dynamic created elements, then this isnot possible. `.on()` is for binding the events. he says he wants to do some jquery to the new elements not sure what he means whether apply some plugins.. ? – PSL Jun 22 '13 at 02:36
  • Yes true, but I assume he just wants to perform standard jQuery, like click handling, mouseover/mouseout events etc – Kylie Jun 22 '13 at 02:38
  • Sorry for not accept this answer for correct before! Thanks :) – allegutta Jun 25 '13 at 03:21