JavaScript/jQueryを使用してアンカータグのクリックイベントをトリガーする
この投稿では、JavaScriptとjQueryでアンカータグのクリックイベントをトリガーする方法について説明します。
1.jQueryの使用
アイデアはjQueryを使用することです .click() 要素で「クリック」JavaScriptイベントをトリガーするメソッド。これを以下に示します。
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $('#search_link')[0].click(); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a id="search_link" href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Click Anchor</button> </div> </body> </html> |
ご了承ください $('selector')[0] として使用されます $('selector') jQueryオブジェクトを返します。
または、hrefの場所に移動するだけの場合は、href値を取得して、に割り当てることができます window.location 物体。その後、URLはあたかもロードされます location.assign() URLで呼び出されていました。
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { window.location = $('#search_link').attr('href'); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a id="search_link" href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Click Anchor</button> </div> </body> </html> |
新しいウィンドウまたはタブでURLを開くには、ウィンドウインターフェイスの open() 方法。
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#submit').click(function() { var url = $('#search_link').attr('href'); window.open(url); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a id="search_link" href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Open in new tab</button> </div> </body> </html> |
2.JavaScriptを使用する
純粋なJavaScriptを使用すると、以下に示すように、要素で「クリック」JavaScriptイベントをトリガーできます。
JS
|
1 2 3 |
document.getElementById('submit').onclick = function() { document.getElementById('search_link').click(); } |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a id="search_link" href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Click Anchor</button> </div> </body> </html> |
または、hrefの場所に移動するには、場所オブジェクトにhref値を割り当てることができます。新しいウィンドウまたはタブで開くには、 window.open() 方法。
JS
|
1 2 3 4 |
document.getElementById('submit').onclick = function() { var url = document.getElementById('search_link').href; window.open(url); } |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a id="search_link" href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Open in new tab</button> </div> </body> </html> |
これで、JavaScriptとQueryを使用してアンカータグのクリックイベントをトリガーすることができます。
こちらも参照: