1

Functions on JavaScript/jQuery selectors apply to elements that were on the page before the function is read. For example,

$('.foo').css('color', 'red');

applies to elements with class foo at the time this part of code was read, but do not apply to elements that were inserted later via JavaScript/jQuery functions such as append(), etc. Is there a way to define a hook that applies automatically at the time when an element is inserted?

sawa
  • 165,429
  • 45
  • 277
  • 381
  • Will they all be inserted the same way (through `append()`, for instance)? – acdcjunior May 13 '13 at 22:39
  • And will the elements inserted be the same class? – eatonphil May 13 '13 at 22:40
  • 1
    This seems a duplicate of [DOM Mutation event in JQuery or vanilla Javascript](http://stackoverflow.com/questions/7692730/dom-mutation-event-in-jquery-or-vanilla-javascript). – acdcjunior May 13 '13 at 22:50
  • acdcjunior, phileaton No, to both questions. I want a general solution. – sawa May 13 '13 at 22:58
  • 1
    I think you might need to clarify your question. Seems to me that everyone including myself is interpreting the question wrong since you don't consider the answers acceptable, which are seemingly answering your question. – Victor Zamanian May 13 '13 at 23:53
  • @sawa - I'm pretty sure my update should solve your problem. – Joe May 17 '13 at 11:29

2 Answers2

2

Using $('.foo') as your selector will match all elements with the foo class whether they've been added after load or not.

For events: .live() has been removed from newer versions of jQuery so you should use .on(). Here's an example:

$(document).on('click', '.foo', function(){
    // click event code here
});

This event will match .foo elements when the page loads as well as any which are loaded via .append(), .html() etc.

UPDATE:

I think I understand what you mean now. There's a plugin called Live Query which should solve your problem. Just include it then use:

$('.foo').livequery(function() { 
    $(this).css('color', 'red');
});

Here's a working demo: http://jsfiddle.net/5jJAE/

Joe
  • 15,205
  • 8
  • 49
  • 56
0

I'm not sure I completely understand your question but let me try and answer.

Dynamic Elements do count!

When you call a method on a JQuery selector it applies to all objects in the DOM that match your selector criteria.

Just to be clear, this includes elements that were added dynamically. For example, take the method "hide" below, applying to a dynamically inserted element.

$('body').append('<h1 id="test" style="display:none;">HI!</h1>');
$('#test').show();

So, it's not that JQuery won't apply to dynamically inserted elements, BUT it just won't apply to elements that don't exist yet. In other words, it won't apply to any elements that are added AFTER your call.

The live() method

However, JQuery does have a clever little method called "live()" which might apply to your needs.

Description: Attach an event handler for all elements which match the current selector, now and in the future.

http://api.jquery.com/live/

Update - live() is deprecated but on() can be used

The replacement to live() is on(). However on() doesn't work quite like live() and to make it work for future elements you have to place an "on" event handler in the PARENT element of future elements.

See this answer for more detailed info: Turning live() into on() in jQuery

Community
  • 1
  • 1
andy
  • 8,775
  • 13
  • 77
  • 122
  • 1
    You're linking to the deprecated section of the jQuery docs. `live` isn't even part of the newest versions of jQuery. I believe `on` is the correct way to do it now, but I could be wrong about that. – Paul May 13 '13 at 22:53
  • This is not what I intended. Sorry if my question was unclear. – sawa May 13 '13 at 23:18
  • hey sawa, what do you mean? Have you read the documentation for live()? it's deprecated but helps understand how on() would work. – andy May 14 '13 at 04:02