Jquery Removeclass rails not working

Question

Can someone help me in this? I want to remove a class on button click, but it works only after 1 click is already done. when i click first time, nothing happens. when i click second time, class is removed HTML Code

<%= form_for :email_form, :html => {:class => "form-horizontal"}, url: search_reduce_credits_by1_path, id: "candidate-email-modal-form", remote: true do |f| %>

    <%= f.hidden_field :lead_id, :value => lead.id %>

    <div class=text-right>
    <%= f.button class: "btn btn-primary", id: "show-mail-btn" do %> 
                                        Show Email
     <% end %>
     </div>

     <% end %> 

    <small class="blurfilter" id="blurred_email_<%= lead.id %>"> <%= lead.email %></small>

JQuery:

$(document).ready(function (){
    $('#show-mail-btn').click(function (){
        $('#blurred_email_1').removeClass('blurfilter');
    });
});

When I update jquery to this,

$(document).on('click', '#show-mail-btn', function(){
  alert("Hey");
  $('#blurred_email_1').removeClass('blurfilter');
});

"Hey" also appears on second click and appears two times, before class is removed.

score 0 · Answer 1 · answered Mar 07 '18 at 19:10

0

You probably need to account for turbolinks:

$(document).on('turbolinks:load', function(){
     $('#show-mail-btn').click(function(){
         $('#blurred_email_1').removeClass('blurfilter');
     })
})

See this question for more details:

Rails 4: how to use $(document).ready() with turbo-links

answered Mar 07 '18 at 19:10

James Milani

1,921
2
16
26

It does not even remove class on any number of clicks. – Somnath Das Mar 07 '18 at 19:16

max · Answer 2 · 2018-03-07T19:37:36.690

0

$(document).on('click', '#show-mail-btn', function() {
  $('#blurred_email_1').removeClass('blurfilter');
});

.blurfilter {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show-mail-btn">Show Email</button>
<input type="email" id="blurred_email_1"  value="test@example.com" class="blurfilter" />

This creates a delegated event handler which will continue to work even after Turbolinks has switched the document contents.

This is an idempotent transformation since it does not rely on adding event handlers to actual elements.

See:

edited Mar 07 '18 at 19:37

answered Mar 07 '18 at 19:26

max

96,212
14
104
165

Again just works on second button click. Is it that element is unavailable during first click? – Somnath Das Mar 07 '18 at 19:28
I'm guessing you have some completely unrelated code thats messing with you, try pressing "Run code snippet" and you will see that it does work as advertised. – max Mar 07 '18 at 19:38
"Is it that element is unavailable during first click? " No, by the time you can click an element the document is ready. – max Mar 07 '18 at 19:43
any other alternative to show hidden email by button click in jquery? – Somnath Das Mar 07 '18 at 19:47
1

There are tons of ways to skin a cat but you should really concentrate on figuring out why its not behaving properly on your system as that will most likely haunt you anyways. – max Mar 07 '18 at 19:50
Getting same behavior with attr('class') – Somnath Das Mar 07 '18 at 19:54

score 0 · Answer 3 · answered Mar 08 '18 at 09:45

0

Try to remove turbolink gem and include in html.

Have a nice day

answered Mar 08 '18 at 09:45

Alexis CHEVREUX

132
1
11

score 0 · Answer 4 · answered Mar 10 '18 at 05:52

0

Found the solution, I just had to remove onclick from js.erb file because it was already being called from form button click. It works perfectly now!

answered Mar 10 '18 at 05:52

Somnath Das

163
2
10

Jquery Removeclass rails not working

4 Answers4