Question

我在link_to '#'内有一个div，在点击时会触发表单中的淡出。

<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>

问题是，它不会进入该功能。这是js代码：

//= require jquery
//= require jquery_ujs

$(document).ready(function(){

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

})

同样适用于：

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

我尝试使用mouseup和on("click", function(){})但结果相同。

那我在这里做错了什么？

Answer 1

尝试以下代码。使用'javascript:;'代替'＃'代替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>

并且

//= require jquery
//= require jquery_ujs

$(document).ready(function(){

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

})

此外，我无法在您发布的代码中找到与此选择器匹配的输入标记此选择器$('input[name*="agree"]')

Answer 2

我通过更改为：

来修复它

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

点击不会触发jquery功能

2 个答案: