jQuery: How to call function when element shows

Question

I want to call a function when a div shows (after show).

Does anybody knows how could I do this? I try to use something like that:

$(#someDiv).bind('show',function(){
    alert('example')
});

But I don't sure if I do that from correct way or if it is possible or not achieve that. Any ideas?

Answer 1

I use this

$(document).on("pagebeforeshow", "#elementID", function ()
{
    //Whatever
});

Answer 2

try this

$(#someDiv).bind('show',function(){
    callFunction();
});

or

$(#someDiv).on('show',function(){
    callFunction();
});

function callFunction() { ............ }

Answer 3

The following code (adapted from http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/) will enable you to use $('#someDiv').on('show', someFunc);.

(function ($) {
  $.each(['show', 'hide'], function (i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function () {
      this.trigger(ev);
      el.apply(this, arguments);
      return el;
    };
  });
})(jQuery);

Answer 4

jQuery live

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

Answer 5

It must be done in the show() method, in its post-callback:

$('#someDiv').show('slide',function(){
    alert('example')
});

Answer 6

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

    <script>

    $(document).ready(function(){
$("#jq_message").show(function(){
$("#jq_message").fadeOut(3000);

$("#div2").fadeOut("slow");

$("#div3").fadeOut(3000);



    }); 

    });

    </script>
<div id="jq_message">
</div>