14

Possible Duplicate:
jQuery event to trigger action when a div is made visible

How can I run some my code when element, wich was loaded by ajax, become visible("display" is switching from "none" to "block")? Well, I need some event like 

$('#element').live('show', function(){
// CODE
});

Or event that watching for deleting/adding some class to element

Community
  • 1
  • 1
Igor Konopko
  • 764
  • 2
  • 13
  • 26
  • What do you mean by loaded by Ajax? are you using a jquery ajax call? – Liam May 14 '12 at 13:19
  • I'm adding
    ...
    by $.ajax(), there are several functions which, depending on the situation change the visibility of this element.. I am not able to change the functions that changing the visibility of the element, but I need to run my code when the element become visible (removed class that addind "display: none" to element css)     – Igor Konopko May 14 '12 at 13:50
  • Done. Use setInterval. See my answer below. – iambriansreed May 14 '12 at 14:19
  • http://stackoverflow.com/questions/10584096/jquery-event-element-become-visible/10613913#10613913 – Igor Konopko May 16 '12 at 07:32

4 Answers4

3

The problem was solved by using jquery-appear plugin

https://github.com/morr/jquery.appear

Shaun Bowe
  • 9,840
  • 11
  • 50
  • 71
Igor Konopko
  • 764
  • 2
  • 13
  • 26
2

There's nothing built-in jQuery that allows you to achieve that. You may take a look at the livequery plugin. For example:

$('#element').livequery(function() {
    // CODE
});

When an element with id="element" is added to the DOM the callback should be executed.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • 3
    The `.live()`, `.delegate()` and `.on()` functions would like to have a word with you... – Anthony Grist May 14 '12 at 13:21
  • 4
    They might want to have a word, but the OP doesn't. He doesn't need to subscribe to events for dynamically added controls. He wants to subscribe to an event which is triggered once an element is added to the DOM which is not the same thing. – Darin Dimitrov May 14 '12 at 13:22
  • 3
    I disagree. My understanding is that he wants a callback function to be fired when dynamically added elements become visible (i.e. switch from `display:none` to `display:block`), not when they're added to the DOM. – Anthony Grist May 14 '12 at 13:27
  • Indeed, if this is what the OP needs then the .on() method is the obvious way to do that. But that's not what I understood from his question. Hopefully the OP will be kind enough to bring some clarification. – Darin Dimitrov May 14 '12 at 13:29
  • Anthony Grist is right, I need to run a function when elements "display :" style is switching from "none" to "block" – Igor Konopko May 14 '12 at 14:00
2

Run a check every 1 second. If the #element exists and is visible then clear(stop) the interval and execute your code.

var checkVisible = setInterval(function(){

    // if element doesn't exist or isn't visible then end
    if(!$('#element').length || !$('#element').is(':visible'))
        return;

    // if element does exist and is visible then stop the interval and run code

    clearInterval(checkVisible);

    // place your code here to run when the element becomes visible

},1000);

Inevitably you have some jQuery event callback which shows the element; in those event callbacks you should place your 'when element is visible' run code.

iambriansreed
  • 21,935
  • 6
  • 63
  • 79
  • 6
    it's too irrational – Igor Konopko May 14 '12 at 14:22
  • Please unpack that for me? Irrational? – iambriansreed May 14 '12 at 14:23
  • 1
    He means that there should be a better method, checking something every second is a bit brute-force. In the era of events, this is odd. – Firsh - justifiedgrid.com Jan 29 '14 at 10:35
  • 2
    @IgorKonopko your plugin actually checks every 4th of a second. It seems my answer is just rational enough. What Exactly does too irrational mean anyway. A little irrationality is ok but this answer has just a little too much irrationality? The best answer would be to attach to the ajax success event the OP mentioned but as we weren't given that code I provided this less than efficient method. – iambriansreed Jan 31 '14 at 14:52
  • 1
    @Firsh The plugin Igor provided as an answer checks something every fourth of second. Brute-force x 4. – iambriansreed Jan 31 '14 at 14:54
  • 1
    This wasn't "too irrational" for me. It worked like a charm. Thanks! – sean.boyer May 12 '14 at 15:14
0

Have you tried jQuery.load()?

http://api.jquery.com/load-event/

It should work at least for images, script tags, etc... not for elements that don't have a URL, though.

Otherwise, livequery should be of help:

jquery live event for added dom elements

Community
  • 1
  • 1
ubik
  • 4,440
  • 2
  • 23
  • 29