0

OK、ここで迷子になりました。特定の要素の状態、特にそれが表示されているか非表示になっているかを確認し、状態の変化によってイベントをトリガーする方法について、ここや他の場所で多数の投稿を読みました。しかし、提案された解決策を機能させることはできません。

まず、誰もが最初にこの点に飛びつくように思われるため、クリック可能な状態で svg アイコンを表示するための jQuery スクリプトが 1 つあるため、これを行う必要が生じました。また、アイコンをクリックしてフォームが表示されたときに関連するアクションを実行する機能が既にあり、明らかにこれらを再利用したいと考えています。

私が試したこと：

最初に、両方のスクリプトをシングル クリック イベントで動作させようとしました (これは理想的な解決策です)。

スクリプト 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
 });

これはうまくいかなかったので、2 つのスクリプト間でイベントを共有する方法を調査しようとしましたが、この件に関してはうまくいきませんでした。そのため、2 番目のスクリプトがピックアップする別のイベントをトリガーしようとしました....

スクリプト 1:

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

スクリプト 2

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

これは再び機能しませんでした。これが望ましい効果をもたらさなかった理由は不明です。

次に、 is(:visible) .... を試しました。

スクリプト 1

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

スクリプト 2

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

だから私は少し迷っています。理想は最初の概念に戻ることです。svg のクリック イベントを両方のスクリプトで処理できない理由がわかりません。これはイベント ハンドラーと関係があると思いますが、スクリプトを変更して両方が同じイベントを取得する方法がわかりません。

可視性の状態が変化してアクションをトリガーするという事実を利用できなかった。

どんなガイダンスも歓迎します。

編集OK スクリプト 2 がスクリプト 1 からトリガーされたイベントを取得するという問題を解決しました。悲しいことに、これは私の側の基本的なエラーでした...フォームがアラートの表示を妨げていました。ただし、 is(:visible) を機能させることはまだできません。

4

1 に答える 1

0

構文がオフになっている可能性があります:

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

次のようにする必要があります。

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

編集: div が表示された後に何かを実行したい場合は、表示を切り替えるのではなく、show() コールバックを使用することをお勧めします。

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

ただし、これは同じ機能で行う必要があるため、あなたの立場が改善されるとは思いません。

問題はおそらく、2 番目のon()スクリプトが最初のスクリプトと同時に実行されていることです。つまり、ラッパーがまだ表示されていません。on()短いタイムアウトで2 番目をラップしてみることができます。

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

2 番目のステートメントを実行しようとする前に、ラッパーが表示されていることを確認するのに十分な遅延が発生するはずです。

于 2012-10-25T10:32:37.433 に答える