QA@IT

ajaxで実装した「もっと見る」リンクを押した際にページ上部に遷移させない方法

3104 PV

もっと見るリンクを押された際にajaxでデータを取得し追加分を表示する処理を実装しています。下記のようにしており追加分の取得&表示はできるのですが、もっと見るリンクを押下するたびページの上部へ遷移してしまいます。ページの上部へ遷移させない方法はないでしょうか?もっと見るリンクの部分から動かずにその下に追加分が動的にでるような挙動が理想です。

Javascript部分

$('.more').live("click",function() {
    var id = $(this).attr('id');

    $.ajax({
        type: 'post',
        url: 'getdata.php',//追加データ取得処理を行うPHP 
        data: {
            'id': id        
            },
        dataType: 'json', 

        success: function(data){
            $.each(data, function(key , value){
                $('#more').append(
                    ~//入れ子にして要素を追加
                )   
            })
        }
    }); 
});

html部分

<a href="#" class="more" id="<?=$id; ?>">もっと見る</a>

回答

以下のどっちかでいけると思います。

・aタグのhrefをいじる方法

<a href="javascript:void(0);" class="more" id="<?=$id; ?>">もっと見る</a>

・遷移(というかデフォルト動作)を抑制する方法

$('.more').live("click",function() {
    $.ajax({});
    return false;
});
編集 履歴 (2)
  • ご教示いただいた方法で無事できました。
    ありがとうございます!!!
    -

効果は同じですが、preventDefault() しておくのがふつうな気がします。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。