I’m trying to figure out a problem with some jQuery that isn’t working as expected. I have this click function that should open either open a modal or show a text box, depending on how the if/else statement is evaluated, but it’s not working. When I load the page, nothing happens. Yet if I insert a some console.log statements in the code, I can see the “Click Apply” gets logged when I click the button, along with $(this).siblings(".apply-menu”), yet the textbox doesn’t show up.
我试图找出一些不能按预期工作的jQuery的问题。我有这个点击功能,应该打开一个模态或显示一个文本框,这取决于如何评估if / else语句,但它不起作用。当我加载页面时,没有任何反应。然而,如果我在代码中插入一些console.log语句,我可以看到单击按钮时会记录“单击应用”,以及$(this).siblings(“.application-menu”),但是文本框没有出现。
If I right click on the output from $(this).siblings(".apply-menu”) n the console and save it to a variable, and then add .show() to it, the box appears, but then disappears immediately when I click on it. There are no errors and I’m struggling to figure out what’s happening here. There are also no other event listeners bound to the button.
如果我右键单击控制台上$(this).siblings(“.application-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();
}
});
Here is the 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>
Here is the rendered HTML:
这是呈现的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>
2 个解决方案
#1
1
Next time you ask a question with this much code it might be helpful to make a jsfiddle so someone can answer your question quicker & easier.
下次你用这么多代码提问时,制作一个jsfiddle可能会有所帮助,这样有人可以更快更轻松地回答你的问题。
I used the rendered HTML you supplied, I then changed the query a little, to show you a couple things, there is only one sibling to that button (that's why there are two jsfiddles 1st one is without the .siblings(".apply-menu") & I used .toggle() instead of .show() since at least in the rendered HTML it was already showing.
我使用了你提供的渲染HTML,然后我稍微更改了一下,向你展示了几个东西,只有一个兄弟到那个按钮(这就是为什么有两个jsfiddles第一个没有.siblings(“。apply-菜单“)&我使用.toggle()而不是.show(),因为至少在它已经显示的呈现HTML中。
Fiddle 1: http://jsfiddle.net/4t0nm1zt/1/
小提琴1:http://jsfiddle.net/4t0nm1zt/1/
Fiddle 2: http://jsfiddle.net/4t0nm1zt/2/
小提琴2:http://jsfiddle.net/4t0nm1zt/2/
Also take a look at this siblings link, mainly the Unique siblings portion of the 1st example/demo, notice how it says 7, and not 11.
另外看一下这个siblings链接,主要是第一个例子/ demo的Unique兄弟姐妹部分,注意它是如何说7,而不是11。
Hope that helps
希望有所帮助
#2
0
I think I've figured out the problem. In another js file I have a .click function bound to elements with the .dropdown-menu class that is canceling out my new click function. See code below:
我想我已经弄明白了这个问题。在另一个js文件中,我有一个.click函数绑定到带有.dropdown-menu类的元素,该类取消了我的新点击功能。见下面的代码:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$('.dropdown-link').click(function(e) {
toggleDropdown(e, '#' + $(this).attr('menu'));
});
I don't know why, but it hadn't occurred to me to just copy all my js files into the jsFiddle and see which one caused the breakage.
我不知道为什么,但我没有想到只是将我的所有js文件复制到jsFiddle中,看看哪一个导致了破损。
#1
1
Next time you ask a question with this much code it might be helpful to make a jsfiddle so someone can answer your question quicker & easier.
下次你用这么多代码提问时,制作一个jsfiddle可能会有所帮助,这样有人可以更快更轻松地回答你的问题。
I used the rendered HTML you supplied, I then changed the query a little, to show you a couple things, there is only one sibling to that button (that's why there are two jsfiddles 1st one is without the .siblings(".apply-menu") & I used .toggle() instead of .show() since at least in the rendered HTML it was already showing.
我使用了你提供的渲染HTML,然后我稍微更改了一下,向你展示了几个东西,只有一个兄弟到那个按钮(这就是为什么有两个jsfiddles第一个没有.siblings(“。apply-菜单“)&我使用.toggle()而不是.show(),因为至少在它已经显示的呈现HTML中。
Fiddle 1: http://jsfiddle.net/4t0nm1zt/1/
小提琴1:http://jsfiddle.net/4t0nm1zt/1/
Fiddle 2: http://jsfiddle.net/4t0nm1zt/2/
小提琴2:http://jsfiddle.net/4t0nm1zt/2/
Also take a look at this siblings link, mainly the Unique siblings portion of the 1st example/demo, notice how it says 7, and not 11.
另外看一下这个siblings链接,主要是第一个例子/ demo的Unique兄弟姐妹部分,注意它是如何说7,而不是11。
Hope that helps
希望有所帮助
#2
0
I think I've figured out the problem. In another js file I have a .click function bound to elements with the .dropdown-menu class that is canceling out my new click function. See code below:
我想我已经弄明白了这个问题。在另一个js文件中,我有一个.click函数绑定到带有.dropdown-menu类的元素,该类取消了我的新点击功能。见下面的代码:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$('.dropdown-link').click(function(e) {
toggleDropdown(e, '#' + $(this).attr('menu'));
});
I don't know why, but it hadn't occurred to me to just copy all my js files into the jsFiddle and see which one caused the breakage.
我不知道为什么,但我没有想到只是将我的所有js文件复制到jsFiddle中,看看哪一个导致了破损。