jQuery クリックしたリンクURLを取得するサンプル
環境
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」というアラートメッセージが表示されます。