web-dev-qa-db-ja.com

href要素でクリックイベントをトリガーする方法

私は以下の方法のようにjqueryでハイパーリンクのクリックイベントをトリガーしようとしています。ハイパーリンクにはIDはありませんが、cssclassはあります

 $(document).ready(function () {  $('.cssbuttongo').trigger('click'); });

上記の機能は動作していません。これはハイパーリンクです

<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>

答えてくれてありがとう。

jqueryeventstriggershyperlinkclick
73
MonsterMMORPG

これを証明する事実の証拠はありませんが、すでにこの問題に遭遇しました。 <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を使用してコードをレンダリングする方法と混ざり合っています。

65
Feisty Mango

ネイティブDOMメソッドは正しいことを行います。

$('.cssbuttongo')[0].click();
                  ^
              Important!

これは、hrefがURL、フラグメント（#blahなど）、またはjavascript:であるかどうかに関係なく機能します。

これはjQuery clickメソッドの代わりにDOM clickメソッドを呼び出します（これは非常に不完全で、hrefを完全に無視します）。

184
Roman Starkov

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必要ではないことを指摘する価値があります。

28
Josh Crozier

JavaScriptを介してクリックをトリガーしても、ハイパーリンクは開きません。これは、ブラウザに組み込まれているセキュリティ対策です。

ただし、回避策については この質問 を参照してください。

4
Blazemonger

皆さんにお知らせしたいのですが、受け入れられた答えが常に機能するとは限りません。

失敗する例を次に示します。

もし<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の例です。

3
Alan Dong