saumitやlinkでアラートを表示させない方法
解決したいこと
① 現在、自分が作成しているアプリケーションにて、記事を投稿するページでだけアラート（このサイトを離れますか？）を実装しようとしています。
② 実装自体はできたのですが、このアラートはブラウザの戻るやリロードした時だけで表示するようにして、投稿するボタン（submit）や、リンクをクリックした時には表示させないようにしたいです。
③ removeEventListenerの記述でうまくできるかなと思いましたが、投稿するボタン等で表示されてしまいます。
④ ご助言をいただけると幸いです。
該当するソースコード
function unloaded(e) {
if (document.URL.match( "posts/new" )) {
e.preventDefault()
e.returnValue = ''
}
const submitBtn = document.getElementById('post-button')
const headerList1 = document.getElementById("header-button-one")
const footerList = document.querySelectorAll(".footer-list")
submitBtn.addEventListener('click',function(){
window.removeEventListener('beforeunload', unloaded)
})
headerList1.addEventListener('click',function(){
window.removeEventListener('beforeunload', unloaded)
})
footerList.addEventListener('click',function(){
window.removeEventListener('beforeunload', unloaded)
})
}
window.addEventListener('beforeunload', unloaded)
<header>
<div class="contents">
<h1 class="title">ROAD BICYCLE</h1>
<div class="search-bar">
<%= form_with(url: "#", local: true, method: :get, class: "search-form") do |form| %>
<%= form.text_field :keyword, placeholder: "キーワード検索", class: "search-box" %>
<button class="search-btn">
<%= image_tag "search.png",class:"search-icon" %>
</button>
<% end %>
</div>
</div>
<div class="header-list">
<ul id: "header-button-one">
<% if user_signed_in? %>
<li><%= link_to '投稿する', new_post_path, data: { confirm: 'この記事はまだ投稿されていません。移動してもいいですか?' } %></li>
<li><%= link_to '予定の確認', '#', data: { confirm: 'この記事はまだ投稿されていません。移動してもいいですか?' } %></li>
<li><%= link_to current_user.username, "#", data: { confirm: 'この記事はまだ投稿されていません。移動してもいいですか?' } %> </li>
<li><%= link_to 'ログアウト', destroy_user_session_path, method: :delete, data: { confirm: 'この記事はまだ投稿されていません。ログアウトしてもいいですか?' } %></li>
<% else %>
<li><%= link_to '投稿する', new_post_path %></li>
<li><%= link_to '予定の確認', '#' %></li>
<li><%= link_to '新規登録', new_user_registration_path %></li>
<li><%= link_to 'ログイン', new_user_session_path %></li>
<% end %>
</ul>
</div>
</header>
<body>
<%= form_with model: @post, url: posts_path, id: 'new_post', class: 'new-post-form', local: true do |f| %>
<% if @post.errors.any? %>
<% end %>
<div class="image-area">
<div class="image-label">
<p>■ 画像</p>
</div>
<div class="image-input">
<%= f.file_field :image, id:"post-image" %>
</div>
</div>
<div class="title-area">
<div class="title-label">
<p>■ 記事のタイトル</p>
</div>
<div class="title-input">
<%= f.text_field :title, class:"input-post", id:"title" %>
<% if @post.errors.include?(:title) %>
<p style="color: red;"><%= @post.errors.full_messages_for(:title).first %>
<% end %>
</div>
</div>
<div class="text-area">
<div class="text-label">
<p>■ 記事の内容</p>
</div>
<div class="text-input">
<%= f.text_area :text, class:"input-post", id:"text" %>
<% if @post.errors.include?(:text) %>
<p style="color: red;"><%= @post.errors.full_messages_for(:text).first %>
<% end %>
</div>
</div>
<div class="category-area">
<div class="category-label">
<p>■ 記事の種類</p>
</div>
<div class="category-input">
<%= f.collection_select(:category_id, Category.all, :id, :name, {}, {class:"category-box", id:"post-category"}) %>
<% if @post.errors.include?(:category_id) %>
<p style="color: red;"><%= @post.errors.full_messages_for(:category_id).first %>
<% end %>
</div>
</div>
<div class="post-btn">
<%= f.submit "投稿" ,class:"post-red-btn", id:'post-button', data: { confirm: '投稿しますか?' } %>
</div>
<% end %>
</body>
<div class="footer">
<ul class="footer-list">
<li><%= link_to '●トップページへ', root_path, data: { confirm: 'この記事はまだ投稿されていません。移動してもいいですか?' } %></li>
<li>●メニュー</li>
<li>●ユーザー名</li>
</ul>
</div>
自分で試したこと
removeEventListenerについて確認し記述してみましたが上手くいきません。
0 likes