jQueryでクリックイベントが起こっているが、aタグのリンクが実行されない

Question

###疑問
jQuery のクリックイベントについて知りたいです。

以下の構造で.trigger_linkをクリックしても、太郎のサイトが開かないのですが、なぜでしょうか？

###該当のソースコード
.posted_user_nameをクリックしたら自サイトである太郎のプロフィールページをPJAXで開き、.outer_linkをクリックしたら外部サイトである太郎のサイトを開くという流れです。

aの入れ子を防ぐべく.trigger_linkにクリックイベントを付与しています。

<div class="item outer_item trigger_link">
	<img class="thumbnail" src="">
	<a class="outer_link" href="http://example.com" target="_blank">太郎のサイト</a>
	<a class="posted_user_name">太郎</a>
</div>

$( document ).on( "click", ".trigger_link", function(ev) {
	ev.stopPropagation();
	
	// クリック要素に応じていろいろな処理
	if( $(this).hasClass('outer_item') ){
		$(this).find('.outer_link').trigger('click');

	}else{
		
	}

});

$( document ).on( "click", "a", function(ev) {

	// 自サイト以外へのリンク
	if( $(this).hasClass("outer-link") ) {
		console.log('.trigger_link をクリックするとこの文は表示されるが、太郎のサイトが開かない');
		ev.stopPropagation();
		return;
	}

	// 自サイトのリンク
	else{
		// PJAX処理が始まる
	}

});

###試したこと
console.log()によって、.trigger_linkをクリックしたときにaのクリックイベントが発生することを確認しました。そこまでいっているのになぜか太郎のサイトが開かないのです。

ちなみに.trigger_linkでなく普通にaをクリックすると、きちんと太郎のサイトが開きます。

target="_blank"を外しても変化ありませんでした。

原因は何が考えられますでしょうか？

Comments

[m.ts10806]

stopPropagation　はなんのために入れてますか？

Answer 1

jQuery の trigger() は、イベントのディスパッチを行いますが、ブラウザのデフォルト動作を起こすことはできません。

HTMLElementのclick()を使えばうまく動くでしょう。
この場合は $(this).find('.outer_link').trigger('click'); ではなく $(this).find('.outer_link')[0].click(); です。

Comments

[kata2murin]

そういうことでしたか！どうもありがとうございました。