私は以下の方法のようにjqueryでハイパーリンクのクリックイベントをトリガーしようとしています。ハイパーリンクにはIDはありませんが、cssclassはあります
$(document).ready(function () { $('.cssbuttongo').trigger('click'); });
上記の機能は動作していません。これはハイパーリンクです
<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>
答えてくれてありがとう。
これを証明する事実の証拠はありませんが、すでにこの問題に遭遇しました。 <a>
タグでclick()イベントをトリガーしても、たとえば入力ボタンで期待するのと同じように動作しないようです。
私が採用した回避策は、ウィンドウにlocation.hrefプロパティを設定することで、これによりブラウザは次のようにリクエストリソースをロードします。
$(document).ready(function()
{
var href = $('.cssbuttongo').attr('href');
window.location.href = href; //causes the browser to refresh and load the requested url
});
});
編集:
私はjsフィドルを作成しますが、質問の性質はjsfiddleがiframeを使用してコードをレンダリングする方法と混ざり合っています。
ネイティブDOMメソッドは正しいことを行います。
$('.cssbuttongo')[0].click();
^
Important!
これは、href
がURL、フラグメント(#blah
など)、またはjavascript:
であるかどうかに関係なく機能します。
これはjQuery click
メソッドの代わりにDOM click
メソッドを呼び出します(これは非常に不完全で、href
を完全に無視します)。
Romkynsの great answer ..に加えて、関連するドキュメント/例がいくつかあります。
DOM要素 ネイティブの.click()
メソッドがあります 。
HTMLElement.click()
メソッドは、要素のマウスクリックをシミュレートします。クリックが使用されると、要素のクリックイベントも発生し、ドキュメントツリー(またはイベントチェーン)の上位の要素にバブルアップし、クリックイベントも発生します。 ただし、クリックイベントをバブリングしても、実際のマウスクリックを受信したかのように
<a>
要素がナビゲーションを開始することはありません。( mdn reference)
関連 W3ドキュメント 。
いくつかの例..
JQueryオブジェクトから特定のDOM要素にアクセスできます: (example)
$('a')[0].click();
.get()
メソッドを使用して、jQueryオブジェクトからDOM要素を取得できます。 (example)
$('a').get(0).click();
予想どおり、DOM要素を選択して .click()
メソッドを呼び出すことができます。 (例)
document.querySelector('a').click();
JQueryは、ネイティブの .click()
イベントをトリガーするためにnot必要ではないことを指摘する価値があります。
JavaScriptを介してクリックをトリガーしても、ハイパーリンクは開きません。これは、ブラウザに組み込まれているセキュリティ対策です。
ただし、回避策については この質問 を参照してください。
皆さんにお知らせしたいのですが、受け入れられた答えが常に機能するとは限りません。
失敗する例を次に示します。
もし<href='/list'>
href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"
または、jQueryから取得したhrefをこれに追加できます
href = document.URL +$('css_selector').attr('href');
またはjQueryの方法
href = $('css_selector').prop('href')
最後に、ブラウザの現在のページのURLを変更するために呼び出します
window.location.href = href
または、window.open(url)
を使用してポップアウトします
ここ はJSFiddleの例です。