Check if the webpage has been modified

Question

I am working on chrome extension for facebook. If you use facebook, you know that when you scroll down to the bottom of the news feed/timeline/profile it shows more posts. The extension actually adds a button beside the "like" button. So I need to check if there are more posts to add that button to.

Right now to check if the page has been modified, I use setInterval(function(){},2000) . I want to run a function when the user clicks the button. But this function doesn't work if I put it outside (or even inside) setInterval() – The Koder just now edit

How can I check if the webpage has been modified WITHOUT using a loop?

Example:

$(document).ready(function(){
    window.setInterval(function(){
          $(".UIActionLinks").find(".dot").css('display','none');
          $(".UIActionLinks").find(".taheles_link").css('display','none');
          $(".miniActionList").find(".dot").css('display','none');
          $(".miniActionList").find(".taheles_link").css('display','none');
              //only this function doesn't work:
          $(".taheles_link").click(function(){
            $(".taheles_default_message").hide();
            $(".taheles_saving_message").show();
          });
               //end
          $(".like_link").after('<span class="dot"> · </span><button class="taheles_link stat_elem as_link" title="תגיד תכל&acute;ס" type="submit" name="taheles" onclick="apply_taheles()" data-ft="{&quot;tn&quot;:&quot;&gt;&quot;,&quot;type&quot;:22}"><span class="taheles_default_message">תכל&acute;ס</span><span class="taheles_saving_message">לא תכלס</span></button>');
          $(".taheles_saving_message").hide();
    }, 2000);
});

In the future, this extension will use AJAX, so setInterval() can make even more problems for me.

Answer 1

If I understand correctly you want to get a notification when the page's DOM changes. And you want to do this without using the setInterval() function.

As your problem lies within the attaching event handlers to elements that are created after the page has loaded, you might be interested in checking out the jquery.live event attachment technique. I think it will solve your issue.

In general you want the page to throw a mutation event. There is a mutation event spec that might be what you're looking for. Here are some links that might be useful.

1. http://tobiasz123.wordpress.com/2009/01/19/utilizing-mutation-events-for-automatic-and-persistent-event-attaching/

2. Detect element content changes with jQuery

Answer 2

$(document).ready(function(){
    setInterval('fun()',5000);
    fun();
});
function fun()
{
    alert(11)
}