CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby-on-rails-4
Bogdan Popa
Bogdan Popa

Reputation: 1099

click won't trigger jquery function

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?

Upvotes: 0

Views: 65

Answers (2)

Bogdan Popa
Bogdan Popa

Reputation: 1099

I fixed it by changing to:

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

Upvotes: 0

Rohan Pujari
Rohan Pujari

Reputation: 838

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

Upvotes: 1

Related Questions