jQuery クリックしたリンクURLを取得するサンプル

2022年10月20日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit
jQuery 3.6.0

構文
1.リンククリック処理メソッド
$(document).on('click’, 'セレクター名 a’, function() {
変数名 = $(this).attr(“href");
onメソッドの引数1に「click」を指定します
引数2に「セレクター名　a」を指定します

2.クリックしたa要素のurlを取得します
$(this).attr(“href”)

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// divのクラス名navi の下の階層にある要素（子孫要素）a のURLを取得
   $(document).on('click', '.navi a', function() {
   //a要素のurlの取得 
　 var url = $(this).attr("href");
    alert(url);
});
 
});
</script>
</head>
<body>

<div class="navi">
<ul>
    <li><a href="http://www.test.com/index?page=11">AA</li>
    <li><a href="http://www.test.com/index?page=22">BB</li>
    <li><a href="http://www.test.com/index?page=33">CC</li>
</ul>
</div>

</body>
</html>

結果
文字「BB」リンクをクリックすると「http://www.test.com/index?page=22」というアラートメッセージが表示されます。

jQuery

Posted by arkgame

関連記事: