jQueryでaリンクにイベントを設定するモダンな書き方を教えてください
リンクにクリックイベントを設定するとき
最初
<a href="#" onClick="jump(1);">ページ1</a>
<a href="#" onClick="jump(2);">ページ2</a>
function jump(page) {
location.href = 'http://hoge' + page;
}
としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました
$(function(){
$("#one").click(function(){
location.href = 'http://hoge' + 1;
});
$("#two").click(function(){
location.href = 'http://hoge' + 2;
});
});
<a href="#" onClick="jump();" id="one">ページ1</a>
<a href="#" onClick="jump();" id="two">ページ2</a>
としたのですが、なんか冗長な気がします。どのように書くのがスマートでしょうか。
aリンクのhref属性が「#」になってしまっているのも微妙な気がします。
モダンなのかどうか分かりませんが、自分ならこう書きます。
$(function(){
$(".jump").on('click',function(event){
event.preventDefault();
event.stopPropagation();
location.href = 'http://hoge' + $(this).attr('href');
return false;
});
});
<a href="1" class="jump">ページ1</a>
<a href="2" class="jump">ページ2</a>