0

入力要素とその横にリンクがあります。ユーザーは入力にテキストを入力し、リンクをクリックしてクエリを実行し、入力内容に関連する何かを見つけます。結果は fancybox を使用して表示する必要があります。ここに私のjsコードがあります:

$(".srcaut").click(function() { 
        if($(this).prev("input").val() == '') {
            alert('Empty field');
            return false;
        }

        srch = $(this).attr("id").replace("srch-",'');

        $(this).attr('href',Url+'/'+srch+'/'+$(this).prev("input").val());
        $(this).fancybox();

    }).prev("input").keypress(function(even) {
         if(even.keyCode == 13) {
            $(this).next('.srcaut').click();
            return false;
        }

});

ただし、ユーザーが最初にテキストを入力してリンクをクリックするか、ページがロードされた後に「Enter」キーを押すと、fancybox は表示されません。しかし、その後は作品です。

何が問題ですか。fancybox は最初はリンクにバインドされていないようですが、なぜですか?

4

3 に答える 3

4

リンクを呼び出すと、ファンシーボックスは表示.fancybox()されません。リンクをクリックすると、ファンシーボックスが表示されるようにリンクが準備されます。これが、ハンドラー内にファンシーボックスが用意されているため、2回目しか機能しない理由です。click

ドキュメントがロードされるときにリンクを呼び出す必要があるかもしれませんが、これにより、のコンテンツ.fancybox()に基づいて動的に構築されたリンクでドキュメントを機能させるという問題が発生します。のイベントでinputリンクを作成してみてください。blurinput

リンクのクリックイベント内のif条件で表示されないようにするにはどうすればよいですか？

を呼び出す前に、が空の場合にイベントの伝播を停止するハンドラーを.fancybox()登録できます。http：//jsbin.com/exomad/3の例を参照してください。clickinput

于 2013-03-06T08:10:09.240 に答える
1

同様の問題に直面している他の人のためにこれを投稿しています..

私の場合、私は持っていました

$('#addvideos').on("click",function(){
    $(".modal").fancybox(fancybox_default);
});

fancybox_default <-- ファンシー ボックスの構成 {height,width} を保存します

addvideos <-- url 要素を指す

私の場合、URLをクリックしたときに初めて構成が読み込まれませんが、その後は機能します。（つまり、動作します（ポップアップが表示されます）が、ポップアップの高さと幅は読み込まれません）

var Trash = $(".modal").fancybox(fancybox_default); を追加する必要がありました。<-- オン クリック ハンドラの前に... // そのことを 1 回ロードして、変数に保持するだけです...

そしてそれは私のために働いた:-)

于 2013-12-05T06:36:29.277 に答える