jquery .click関数はボタンを押しても発火しません。何度もクリックしなければならない

私はこのjqueryコードを持っています:

$(document).ready(function() {
        $('div.badge_button > .more').click(function() {
        var id = $(this).attr('id');
        $('#window').fadeIn();
        $("#window").empty().html('');
        $('#window').load('badge.php', {id:id});
        $.scrollTo( '#window', 200 );

});
});

そしてこのhtml:

<div class = 'badge_button'>More</div>

私の問題は、実際に発生する前に何度も "more"ボタンをクリックしなければならないことです。これはオンとオフで起こります。これはデフォルトの動作のためか、 href = '#' と関係がありますか?

1
IDウィンドウのコントロールは何ですか?
追加された 著者 Baz1nga,
あなたはfalseを返す必要があります。またはpreventDefaultをクリックすると、ハッシュタグでサイトが更新されます。だからあなたは一度クリックすると、それが更新され、二回クリックすると、すでにそこにあることが表示され、その機能が表示されます。少なくとも私の理論:)
追加された 著者 Marco Johannesen,

3 答え

私は問題を推測しているウィンドウオブジェクトへの参照です(うまくいけば参照しようとしている)。

その場合、コードは次のようになります。

$(document).ready(function() {
        $('div.badge_button > .more').click(function() {
        var id = $(this).attr('id');
        $(window).fadeIn();
        $(window).empty().html('');
        $(window).load('badge.php', {id:id});
        $.scrollTo( window, 200 );
        });
});

イベントをバインドしている間、ドキュメントを参照している方法を見てください。

Demo: look at the error console you will now find an error saying page not found as that page does not exist on the server. hopefully it should work on your site.

また、あなたはdocument.readyを取り除き、代わりにライブハンドラを使用することもできます。何かのようなもの:

$('div.badge_button > .more').live("click",function() {
        var id = $(this).attr('id');
        $(window).fadeIn();
        $(window).empty().html('');
        $(window).load('badge.php', {id:id});
        $.scrollTo( window, 200 );
        });

お役に立てれば。

0
追加された
私は誰に誰を与えているのか分からない-1
追加された 著者 re1man,
なぜ否定的な投票!
追加された 著者 Baz1nga,

私は return false; を追加しないことが問題だと思います。 href =#がページを再読み込みするので、必要です。

$(document).ready(function() {
        $('div.badge_button > .more').click(function() {
        var id = $(this).attr('id');
        $('#window').fadeIn();
        $("#window").empty().html('');
        $('#window').load('badge.php', {id:id});
        $.scrollTo( '#window', 200 );
        return false;
});
});

それが役に立てば幸い...

0
追加された
誰かがマイナス1をくれた...固定した
追加された 著者 re1man,

はい、Jqueryのロジックは問題ありませんが、 href =#がページをリロードしています。

Jqueryロジックに return false; を追加するだけです。

$(document).ready(function() {
        $('div.badge_button > .more').click(function() {
             var id = $(this).attr('id');
             $('#window').fadeIn();
             $("#window").empty().html('');
             $('#window').load('badge.php', {id:id});
             $.scrollTo( '#window', 200 );
             return false;
        });
});
0
追加された
誰かがマイナス1をくれた...固定した
追加された 著者 re1man,
いくつかの人々はちょうど6分の遅れであなた自身の答えをコピーする...ちょっと言って...笑
追加された 著者 Akos,