我正在尝试找出某些jQuery无法正常工作的问题。我有这个点击功能应该打开一个模态或显示一个文本框，具体取决于如何评估if / else语句，但它不起作用。当我加载页面时，没有任何反应。然而，如果我在代码中插入一些console.log语句，我可以看到单击按钮时会显示“单击应用”，同时显示$(this).siblings(".apply-menu”)，但文本框不会显示。
如果我右键单击控制台$(this).siblings(".apply-menu”)的输出并将其保存到变量，然后将.show()添加到该变量，则会出现该框，但是当我点击它时会立即消失。没有错误，我正在努力弄清楚这里发生了什么。也没有其他事件监听器绑定到按钮。
$("button[menu='apply']").click(function(){
console.log("Click Apply");
if($('body').attr('signed-in') == "false"){
console.log(true);
$(this).siblings(".apply-menu").hide(); //hide dropdown for modal
modal.open({
content: $('#signup_form').html(),
top: 130
});
} else {
console.log($(this).siblings(".apply-menu"));
$(this).siblings(".apply-menu").show();
}
});
这是ERB：
<div class="dropdown" id='dropdown{{j.id}}'>
<% if user_signed_in? %>
<button ng-if="checkIfAppliedToJob(j.id, appIDs) && $(statusIDs).filter([j.status_id]).size() > 0;" class="j-descrip-button thin" disabled>Pending</button>
<button ng-if="!checkIfAppliedToJob(j.id, appIDs);" class="j-descrip-button thin job-dropdown-link" menu="apply">Apply</button>
<% else %>
<button class="j-descrip-button thin job-dropdown-link" menu="apply">Apply</button>
<% end %>
<div class="dropdown-menu middle apply-menu">
<div class="dd_arrow_middle" style='z-index: -1;'></div>
<div class="apply-dropdown-content">
<% if user_signed_in? %>
<% if !current_user.first_name.present? || !current_user.last_name.present? || !current_user.resume_file_name.present? %>
<div>Oops! Looks like you need to provide us with some info - go to <%= link_to 'My Account', edit_user_registration_path %> to upload your resume and/or give us your name.</div>
<% else %>
<span class="apply-prompt"><%= @apply_question %></span>
<br>
<span class="outer-wc"><span class="word-count">0</span>/500 characters</span>
<form accept-charset="UTF-8" action="{{'/applications?id=' + j.id}}" class="pitch-form" data-remote="true" html="{:role=>"form"}" id="{{j.id}}" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div>
<% if defined? @error_msg %>
<span><%= @error_msg %></span>
<% end %>
<div class="form-group">
<textarea class="apply-textbox" id="pitch" name="pitch"></textarea>
</div>
<div style="display:none;"><input id="user_id" name="user_id" type="text" value="<%= current_user.id %>"></div> <!-- is this the best way to access the user, are there drawbacks? -->
<div style="display:none;"><input id="job_description_id" name="job_description_id" type="text" value="{{j.id}}"></div>
<div style="display:none;"><input id="company_id" name="company_id" type="text" value="<%= @company.id %>"></div>
<input class="apply-submit-btn" name="commit" type="submit" value="Submit Application">
</form>
<% end %>
<% else %>
<div>You have to sign in before you can apply to jobs.</div>
<% end %>
</div>
</div>
</div>
以下是呈现的HTML：
<div class="content">
<div class="job-title ng-binding" style="background: #53AA2A">Lead Developer</div>
<div class="job-role ng-binding" id="Ruby Ninja">Ruby Ninja</div>
<p class="job-description ng-binding">Awesome sauce!</p>
<div class="btn-holder">
<div class="dropdown">
<a href="http://www.google.com/" onclick="return !window.open(this.href,'', 'width=720,height=480,location=no,menubar=no,resizable=yes,scrollbars=yes,toolbar=no,status=no');"><button class="j-descrip-button thin">Read More</button></a>
</div>
<div class="dropdown" id="dropdown11">
<!-- ngIf: checkIfAppliedToJob(j.id, appIDs) && $(statusIDs).filter([j.status_id]).size() > 0; -->
<!-- ngIf: !checkIfAppliedToJob(j.id, appIDs); --><button ng-if="!checkIfAppliedToJob(j.id, appIDs);" class="j-descrip-button thin job-dropdown-link ng-scope" menu="apply">Apply</button><!-- end ngIf: !checkIfAppliedToJob(j.id, appIDs); -->
<div class="dropdown-menu middle apply-menu">
<div class="dd_arrow_middle" style="z-index: -1;"></div>
<div class="apply-dropdown-content">
<span class="apply-prompt">What makes you and Ice 2 Go a good fit?</span>
<br>
<span class="outer-wc"><span class="word-count">0</span>/500 characters</span>
<form accept-charset="UTF-8" action="/applications?id=11" class="pitch-form ng-pristine ng-valid" data-remote="true" html="{:role=>"form"}" id="11" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div>
<div class="form-group">
<textarea class="apply-textbox" id="pitch" name="pitch"></textarea>
</div>
<div style="display:none;"><input id="user_id" name="user_id" type="text" value="1"></div> <!-- is this the best way to access the user, are there drawbacks? -->
<div style="display:none;"><input id="job_description_id" name="job_description_id" type="text" value="11"></div>
<div style="display:none;"><input id="company_id" name="company_id" type="text" value="3"></div>
<input class="apply-submit-btn" name="commit" type="submit" value="Submit Application">
</form>
</div>
</div>
</div>
<div class="dropdown">
<button class="j-descrip-button thin job-dropdown-link" menu="refer">Refer A Friend</button>
<div class="dropdown-menu right refer-menu">
<div class="dd_arrow"></div>
<div class="refer-dropdown-content">
<form accept-charset="UTF-8" action="/send_refer_a_friend_email" html="{:role=>"form"}" method="post" class="ng-pristine ng-valid"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="tPFqDeHakW85TmdouG7Qsu9vJ5f+kvpM40MC2rYUPe0="></div>
<div class="form-group" style="display: none;">
<label for="company_name">Company Name</label>
<input class="form-control" id="company_name" name="company_name" type="text" value="Ice 2 Go">
</div>
<div class="form-group" style="display:none;">
<label for="job_title">Job Title</label>
<input id="job_title" name="Ruby Ninja" type="text" class="form-control">
</div>
<div style="font-size: 20px; margin-bottom: 10px;"><b>You're an awesome friend!</b></div>
<div class="form-group">
<label for="user_full_name">Your Name</label> <!-- is this the best way to do this? -->
<div>
<input class="refer-text-field" id="user_full_name" name="user_full_name" type="text" value="Daniel Bonnell">
</div>
</div>
<div class="form-group">
<span><label for="friend_email">Your Friend's Email</label> <em style="font-size: 10px;">use commas for multiple emails</em></span>
<div>
<input class="refer-text-field" id="friend_email" name="friend_email" type="text">
</div>
</div>
<div class="prof-link" style="display: none;">
<label for="prof_link">Profile Link</label>
<input class="form-control" id="prof_link" name="prof_link" type="text" value="http://localhost:3000/ice-2-go">
</div>
<input class="refer-submit-btn" name="commit" type="submit" value="Send to My Friend(s)">
</form>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
下次你用这么多代码问一个问题时，制作一个jsfiddle可能会有所帮助，这样有人可以更快地回答你的问题。更容易。
我使用了你提供的渲染HTML，然后我稍微更改了一下，向你展示了几个东西，只有一个兄弟到那个按钮（这就是为什么有两个jsfiddles第一个没有{{1} }＆amp;我使用.siblings(".apply-menu")代替.toggle()，因为至少在它已经显示的呈现HTML中。
小提琴1： http://jsfiddle.net/4t0nm1zt/1/
小提琴2： http://jsfiddle.net/4t0nm1zt/2/
另请查看this siblings link，主要是第一个示例/演示的独特兄弟姐妹部分，注意它是如何显示7而不是11。
希望有所帮助
答案 1 :(得分：0)
我想我已经找到了问题所在。在另一个js文件中，我有一个.click函数绑定到.dropdown-menu类的元素，该类取消了我的新点击功能。请参阅以下代码：
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$('.dropdown-link').click(function(e) {
toggleDropdown(e, '#' + $(this).attr('menu'));
});
我不知道为什么，但是我没有想到将我的所有js文件复制到jsFiddle中，看看哪一个导致了破损。