web-dev-qa-db-ja.com

jQueryでクリックした後にリンクhrefを変更する

クリックすると、href属性が切り替わり、その場所に移動するリンクを作成しようとしています。

私のhtmlは：

_<a href="http://google.com" rel="group" data-wpurl="http://yahoo.com"></a>
_

クリックすると、ブラウザはhrefの場所ではなく、data-wpurlの場所に移動します。データ属性を使用している理由は、使用しているアプリケーションが、ここでは関係ないhref ...の使用を必要とするためです。

私のjQueryは：

_$('a[rel="group"]').on('click', function(e) {
      e.preventDefault();
      var wpurl = $(this).attr("data-wpurl");
      $(this).attr('href', wpurl);
});
_

E.preventDefault（）;を使用しています。ブラウザがユーザーをhrefに誘導しないようにします。データ属性がhrefに割り当てられた後、クリックをトリガーするにはどうすればよいですか？ trigger('click')とclick();を使用しても機能しません！

何か案は？

jqueryattributes
18
JCHASE11

すぐに場所を変更する方が簡単です：

e.preventDefault();
location.href = $(this).data('wpurl');
17
Ja͢ck

同様のソリューションですが、e.preventDefault()を呼び出す必要はありません

$('a[rel="group"]').on('click', function(e) {
    e.originalEvent.currentTarget.href = $(this).data('wpurl');
});

私の観点から、これはデフォルトのブラウザの動作を変更しないため、より一般的でクリーンなソリューションです（たとえば、ユーザーがリンク上でマウスホイールを使用してクリックしても、Jacksソリューションでは新しいタブは開きません）

23
Gerwald

Onmousedownを使用します。 Googleは、検索結果ページでこのメソッドを使用して、クリックしたものを追跡できるようにします。リンクの行き先を確認するには、左ではなく右クリックします。どちらもonmousedownイベントをトリガーします。

http://jsfiddle.net/afLE3/

<a href="http://google.com" data-wpurl="http://yahoo.com" onmousedown="rwt(this)">CLICK HERE</a>

<script type="text/javascript">
  rwt = function(e){
    e.href = $(e).data('wpurl');
  }
</script>
8
Dan

E.preventDefault（）を除いて、元のjQueryは問題ないと思います。これ以降、href属性に何をしても、イベントの起動が停止します。

$('a[rel="group"]').on('click', function(e) {
      var wpurl = $(this).attr("data-wpurl");
      $(this).attr('href', wpurl);
});

上記のコードはすべて、ページが更新される前に実行されます。

5
Ross Angus