3

I'm new to writing Javascript, and here's what I'm doing/trying to do.

When a page loads (window.onload) my Javascript code goes through all the forms in a page and attaches a certain onchange method to them. This works fine for most websites on the internet, except when a page dynamically updates to load more forms on the page. How do I detect such an event and re-run my function?

For example:

The Facebook Newsfeed has a bunch of forms associated with all the different statuses/links posted. My code goes through them and attaches the listener. But if go you all the way down the page automatically updates to reveal more statuses/links/etc. (or you click the "Older Posts" link) - but now my javascript code has not run globally again.

Anyway I can do that?

EDIT: I am writing a browser extension.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
PixelPerfect3
  • 110
  • 1
  • 1
  • 6
  • If you're writing a browser extension, you should probably note that fact. If not, then I'm pretty confused about where your script is used. – Pointy Dec 06 '10 at 18:43
  • Ah yes sorry...I am writing a browser extension. – PixelPerfect3 Dec 06 '10 at 18:44
  • Not quite sure what you are trying to do. For detecting mutation events, [jQuery mutation events discussion](http://forum.jquery.com/topic/mutation-events-12-1-2010). Doesn’t look straightforward. – Benji XVI Dec 06 '10 at 18:48

1 Answers1

3

use .live() ?

$(document).ready(function()
{
    $(document).live("onchange",function()
    {
        // blah?
    });
});
bevacqua
  • 47,502
  • 56
  • 171
  • 285
  • Oh that seems to be what I'm looking for...thanks a bunch. Will try it. Seems like it attaches the function whenever a new object is appended to the html file. – PixelPerfect3 Dec 06 '10 at 18:52
  • Ok so that example seems to be attaching the 'live' function to a certain class - is there anyway to attach that function to a "input" object for example: $(document).getElementsByTagName('input').live('click', function() { // Live handler called. }); – PixelPerfect3 Dec 06 '10 at 18:57
  • @PixelPerfect3: Have a look at jQuery selectors (http://api.jquery.com/category/selectors/). But to answer your question, yes, you'd just do $("input").live("click", function() { }); You could even get fancy and do "I want all inputs of type submit", they have a selector for that $(":submit"). – Pandincus Dec 06 '10 at 19:12
  • @Pandincus: Thanks. That helps...I am not too familiar with JQuery (as I said, new to Javascript) but it seems like it's really crucial. – PixelPerfect3 Dec 06 '10 at 19:21
  • 1
    @PixelPerfect3: Nah, it's not crucial to javascript (in fact there are many javascript purists who will say you should learn javascript and understand it first), but it helps a lot. The problem with javascript is that, although it is an extremely powerful and in some ways quite elegant language, the DOM API is quite lacking and each browser's implementation is different, making cross-browser compliance a real pain. jQuery just gives you an extremely rich, cross-browser API that makes working with the DOM easy ... no, more than easy, FUN. – Pandincus Dec 06 '10 at 19:24
  • @PixelPerfect3: See http://stackoverflow.com/questions/668642/is-it-a-good-idea-to-learn-javascript-before-learning-jquery – Pandincus Dec 06 '10 at 19:25
  • 3
    Just came across this answer after a google search. Might be worth updating the answer to mention that `live()` is now a depreciated function (as of v1.7+). Best regards – Gareth Jul 28 '15 at 19:02