2016-08-14 3 views
1

私は以下のいくつかの例があります。いくつかの魔法をしターボリンク5に特定の負荷がかかるのを防ぐ<a></a>

<a href="#" id="add-item"> 
    <i class="fa fa-plus"></i> 
</a> 

そして、いくつかのJS: なし本物のhrefを持つこのようなリンクは

id = $('#watch-path-group').children().length + 1 
$('#watch-path-group').append '<input style="margin-top: 4px;" id=wp_"' + id + '" name=wp_"' + id + '" type="text" class="form-control" placeholder="New path...">' 

5をturbolinksへのアップグレード後に動作が変更されました。リンクをクリックすると、ターボリンクがステップインしてページがリロードされます。この場合、新しく追加された要素は消えます。

これは多分、ターボリンクが行うことです。取られたgithub

ターボリンクは、同じドメインへのリンク上のすべてのクリックをインターセプトします。適格なリンクをクリックすると、Turbolinksはブラウザがそのリンクをたどらないようにします。代わりに、TurbolinksはHistory APIを使用してブラウザのURLを変更し、XMLHttpRequestを使用して新しいページをリクエストし、HTMLレスポンスをレンダリングします。

しかし、私は何をしようとしていますか。説明したようにリンクタグの使用を止めるべきですか?

おかげ

+0

明確にする:あなたがしようとしているものターボリンクがそのことをした後、2番目のjsコードを実行しますか? – yezzz

+0

@yezzzいいえ...そうですね。ページが読み込まれ、ユーザーがリンクをクリックしてjsが実行されると、新しい要素を追加する必要があります。それが私が望むものです。しかし、リンクがクリックされると、要素が追加され、ターボリンクがページをリロードするときです... – martin

+0

ページを更新した後ではなく、ページを更新する前に#watch-path-groupに入力が追加されると言っていますか? – yezzz

答えて

1

特定のリンクにturbolinksを無効にするには、ドキュメントを見ると、あなたが要素またはその祖先にdata-turbolinks="false"属性を追加する必要があります。

だから、次は動作するはずです:もちろん

<a href="#" id="add-item" data-turbolinks="false"> 
    <i class="fa fa-plus"></i> 
</a> 

これは、独自のクリックハンドラが正しく設定されていると仮定し、あなたのidのがユニークである、など

+0

ビンゴ!ビンゴ!ビンゴ! – martin

関連する問題