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?

JellicleCat · Answer 1 · 2015-04-10T19:02:15.210

17

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);

edited Apr 10 '15 at 19:02

answered Oct 22 '13 at 18:41

JellicleCat

28,480
24
109
162

This breaks chaining after `show()` or `hide()` are called – Brian Leishman Apr 10 '15 at 18:27
Thanks for the heads up, @BrianLeishman. I've made a change to preserve chaining and a plunker to test it: http://plnkr.co/edit/Yv5nnqBI2o23mitDQI86?p=preview – JellicleCat Apr 10 '15 at 19:03
I still had a problem with the updated version with chaining, specifically with the Chosen library that seems to leverage it. The problems seemed to go away if I tweak it to be "return el.apply(this,arguments);" I think you're returning the original function instead of the response? – Rikaelus Jun 06 '15 at 03:36
Bad idea to trigger custom events on random elements. If I have custom handler on some element for my custom event `show`, I don't want it triggers by someone else – kerstvo Dec 20 '19 at 17:46

score 6 · Answer 2 · answered Mar 05 '13 at 19:44

6

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

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

answered Mar 05 '13 at 19:44

Nelson

49,283
8
68
81

This way you are not "waiting" for the event. It's useless, for example, in case of a modal window because you are showing it right now. – L. Alejandro M. Nov 10 '19 at 01:29

score 1 · Answer 3 · edited Nov 25 '22 at 16:50

1

<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>

edited Nov 25 '22 at 16:50

mXaln

105
11

answered Nov 20 '14 at 10:03

Aman Attari

181
3
12

score 0 · Answer 4 · answered Mar 05 '13 at 19:44

0

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

answered Mar 05 '13 at 19:44

Jon Harding

4,928
13
51
96

It tried, and it doesn't seems to work. Did you manage to make it work once? – NLemay Dec 11 '13 at 22:03

score 0 · Answer 5 · answered Mar 09 '17 at 23:10

0

I use this

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

answered Mar 09 '17 at 23:10

MarceloBarbosa

915
16
29

Jquery mobile. Deprecated 1.4.0 – L. Alejandro M. Nov 10 '19 at 01:35

aloplop85 · Accepted Answer · 2013-06-19T07:38:43.003

-1

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().

edited Jun 19 '13 at 07:38

answered Jun 18 '13 at 16:05

aloplop85

892
3
16
40

21

Why is this the accepted answer? It's not even an answer to the question. – Clonkex Nov 14 '17 at 22:59

score -2 · Answer 7 · answered Mar 05 '13 at 19:43

-2

try this

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

or

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

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

answered Mar 05 '13 at 19:43

PSR

39,804
41
111
151

whats the difference between your code snippet and code provided by OP $("#SF-pid-1").on('show',function(){ alert("Jai Ho"); }); tried to call this and this also have not worked – Ravinder Payal Oct 13 '15 at 10:43

jQuery: How to call function when element shows

7 Answers7

Linked