Sharing an event across two scripts or using change is visibility state as an event trigger

Question

OK I am lost here. I have read numerous postings here and else where on the topic of how to check for the state of a given element in particular whether it is visible or hidden and make the change of state trigger an event. But I cannot make any of the suggested solutions work.

Firstly, as every one seems to leap on this point first, the need to do this has arisen as I have one jQuery script which deals with displaying an svg icon in a clickable state. And another which already has functions to perform relevant actions when the form is made visible by clicking the icon and obviously I want to reuse these.

What I have tried:

Initially I tried have both the scripts acting on a single click event (this remains the ideal solution)....

Script 1:

 $(".booked").on("click", function() {
         $("#cancellation_Form_Wrapper").css("visibility","visible");
 }).svg({loadURL: '../_public/_icons/booked.svg'});


Script 2:

 $(".booked").on("click", function() {
 // do stuff
 });

This did not work so I tried to research sharing an event across two scripts but couldn't make any head way on this subject so I tried triggering another event for the second script to pick up....

Script 1:

 $(".booked").on("click", function() {
         $("#cancellation_Form_Wrapper").css("visibility","visible");
         $("#cancellation_Form_Wrapper").trigger("change");
 }).svg({loadURL: '../_public/_icons/booked.svg'});

Script 2

 $("#cancellation_Form_Wrapper").on("change", function(event){
    // do stuff
 });

This did not work again I am unclear why this didn't have the desired effect.

Then I tried is(:visible) ....

Script 1

 $(".booked").on("click", function() {
         $("#cancellation_Form_Wrapper").css("visibility","visible");
 }).svg({loadURL: '../_public/_icons/booked.svg'});

Script 2

 $("#cancellation_Form_Wrapper").is(":visible", function(){
 // do stuff
 });

So I am a bit lost. The ideal would be to return to the first notion. I do not understand why the click event on the svg cannot be handled by both scripts. I assume that this has something to do with event handlers but I am not sure how I could modify the script so they both picked up the same event.

Failing that I could use the fact the visibility state changes to trigger the action.

Any guidance welcomed.

Edit Ok I have just resolved the issue with script 2 picking up the triggered event from script 1. Sad to say this was a basic error on my part ... the form was preventing the display of the alert. However I still cannot get the is(:visible) to work.

Answer 1

Your syntax may be off:

$("#cancellation_Form_Wrapper").is(":visible", function(){
    // do stuff
});

should be:

if($("#cancellation_Form_Wrapper").is(":visible")){
    // do stuff
});

EDIT: If you want something to happen after a div is made visible, you may want to use the show() callback rather than toggling visibility:

$('#cancellation_Form_Wrapper').show(timeInMilliseconds, function(){
    // do something
});

However, this needs to take place in the same function, which I don't think improves your position.

The problem is probably that your second on() script is firing at the same time as your first, meaning the wrapper is not yet visible. You could try wrapping the second on() in a short timeout:

$(".booked").on("click", function() {
    setTimeout(function(){
        if($("#cancellation_Form_Wrapper").is(":visible")){
            // do stuff
        });
    }, 100);
});

That should introduce enough of a delay to make sure the wrapper has been shown before trying to execute the second statement.