QA@IT
«質問へ戻る

質問を投稿

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

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

Javascript部分

```html
$('.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部分

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