click won't trigger jquery function

Question

I have a link_to '#' inside a div which should trigger fading in a form, on click.

<div id="atendees-wrap">

  <%= f.simple_fields_for :atendees do |a| %>

    <div class="expandable-members">
      <%= link_to 'Membrul', '#', class: 'trigger' %>  
    </div>

    <div id="primary-info"></div>
    <div id="secondary-info"></div>

  <% end %>
</div>

The problem is, it won't event enter the function. Here's the js code:

//= require jquery
//= require jquery_ujs

$(document).ready(function(){

  $('#atendees-wrap').find('.expandable-members').click(function() {
    debugger
    $('#primary-info, #secondary-info').fadeIn("slow");
  });

})

Same goes for:

$('input[name*="agree"]').click(function() {
  if ($(this).is(':checked')) {
    console.log( "clicked" );
    $('input[type="submit"]').removeAttr('disabled');
  } else {
    $('input[type="submit"]').attr('disabled', 'disabled');
  }
});

I tried with mouseup and on("click", function(){}) but same result.

So what am I doing wrong here?

Have you included jquery.js? Checked the console for any errors? — Rory McCrossan
– Rory McCrossan, Commented Feb 26, 2016 at 9:07
@RoryMcCrossan yep, no errors and jquery is included. I have 2 other functions which work just fine. — Bogdan Popa
– Bogdan Popa, Commented Feb 26, 2016 at 9:11
Have you checked the length of $('#atendees-wrap').find('.expandable-members'), does it find anything? — Alex.Me
– Alex.Me, Commented Feb 26, 2016 at 9:18
@Alex.Me you are right, the element was being added after dom load. — Bogdan Popa
– Bogdan Popa, Commented Feb 26, 2016 at 9:36

Rohan Pujari · Accepted Answer · 2016-02-26 09:18:50Z

1

Try below code. Use 'javascript:;' instead of '#' for href.

<div id="atendees-wrap">

  <%= f.simple_fields_for :atendees do |a| %>

    <div class="expandable-members">
      <%= link_to 'Membrul', 'javascript:;', class: 'trigger' %>  
    </div>

    <div id="primary-info"></div>
    <div id="secondary-info"></div>

  <% end %>
</div>

And

//= require jquery
//= require jquery_ujs

$(document).ready(function(){

  $('#atendees-wrap .expandable-members').click(function() {
    $('#primary-info, #secondary-info').fadeIn("slow");
  });

})

Also I am unable to find input tag matching this selector this selector $('input[name*="agree"]') in the code that you posted

answered Feb 26, 2016 at 9:18

Rohan Pujari

8381 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bogdan Popa · Accepted Answer · 2016-02-26 09:36:06Z

0

I fixed it by changing to:

$(document).on('click', '#atendees-wrap .expandable-members', function (e) {
  e.preventDefault()
  $('#primary-info, #secondary-info').slideToggle("slow");
});

answered Feb 26, 2016 at 9:36

Bogdan Popa

1,0991 gold badge16 silver badges37 bronze badges

Collectives™ on Stack Overflow

click won't trigger jquery function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related