前提・実現したいこと
"button"のクリック時に、フェードアウトからフェードインへ繋げて実行するようにしたい。
発生している問題
"button"要素にイベントを設定しても思ったように動かない。
"button"要素に設定すると、クリック→フェードアウトまでするが、別要素のフェードインまでしてくれない。
親要素にイベントを設定するとうまくいくが、
子要素として、"button"だけではなく、"input"タグがあるので、
"input"のクリック時にもイベントが発生してしまうという始末。
該当のソースコード
Vue.js
1<transition-group id="hide" name="list-complete" tag="ul"> 2 3 <li v-for="item in items" v-bind:key="item" class="list-complete-item"> 4 <label v-bind:class="{ done: item.isChecked }"> 5 6 <input type="checkbox" v-model="item.isChecked"> {{ item.title }} 7 <button type="button" v-on:click="deleteTodo()">消去</button> 8 9 </label> 10 </li> 11 </transition-group>
試したこと
<li>、<label>、<input>、<button>要素全てに対して以下のコードで試しました。 <transition-group>へ設定するとフェードイン、フェードアウトは正常に動作しますが、 "input"タグにクリックした際にもイベントが発火してしまいます。本来は"input"ではなく、"button"クリック時のみ本イベントを発生させたいです。
jquery
1$('#hide').hide(); 2 3$( '#addr' ).keypress( function ( e ) { 4 if ( e.which == 13 ) { 5 $('#addr').fadeOut(1000); 6 $('#hide').delay(1000).hide().fadeIn(1000); 7}}); 8 9$('#button').on("click",function () { 10 $('#hide').fadeOut(1000); 11 $('#addr').delay(1000).hide().fadeIn(1000); 12}); 13
補足情報(FW/ツールのバージョンなど)
vue.jsを使用してlocalstorageにデータを保存する、
todoリストを作成しています。