点击不会触发jquery功能
问题描述:
我有一个link_to '#'
内div
应该触发淡入淡出的表单,点击。点击不会触发jquery功能
<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(){})
,但同样的结果。
那么我在这里做错了什么?
答
请尝试以下代码。 href使用'javascript:;'
而不是'#'。
<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"]')
这个选择匹配:
$(document).on('click', '#atendees-wrap .expandable-members', function (e) {
e.preventDefault()
$('#primary-info, #secondary-info').slideToggle("slow");
});
你包含jquery.js吗?检查控制台是否有任何错误? –
@RoryMcCrossan是的,没有错误和jQuery包括在内。我有两个其他功能,工作得很好。 –
你检查了$('#atendees-wrap')的长度吗?find('。expandable-members'),它发现了什么吗? –