Sharing an event across two scripts or using change is visibility state as an event trigger
<p>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.</p>

<p>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.</p>

<p>What I have tried:</p>

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

<p>Script 1:</p>

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


Script 2:

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

<p>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....</p>

<p>Script 1:</p>

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

<p>Script 2</p>

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

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

<p>Then I tried is(:visible) ....</p>

<p>Script 1</p>

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

<p>Script 2</p>

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

<p>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.</p>

<p>Failing that I could use the fact the visibility state changes to trigger the action.</p>

<p>Any guidance welcomed.</p>

<p><strong>Edit</strong> 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.</p>
