JQuery.click function not working as expected
I am trying to figure out a problem with some jQuery not working as expected. I have this click function that should either open modal or show textarea, depending on how the if / else statement is evaluated, but its not working. When I load the page, nothing happens. However, if I paste some console.log statements into the code, I see that "Click Apply" is logged when I click the button, along with $(this).siblings(".apply-menu")
, but no text box is displayed.
If I right click on exit $(this).siblings(".apply-menu")
n of the console and save it to a variable and then add to it .show()
, a window appears, but then immediately disappears when I click on it. There are no errors and I am struggling to understand what is going on here. There are also no other event listeners associated with the button.
$("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's the HTML rendering:
<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 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>
source to share
Next time you ask a question using this big code, it might be helpful to do a jsfiddle so someone can answer your question faster and easier.
I used the HTML you provided, I modified the request a little to show you a couple of things, there is only one brother to this button (why there are two jsfiddles, 1st one without .siblings(".apply-menu")
and I used .toggle()
instead .show()
, since at least in the rendered HTML has already shown it.
Fiddle 1: http://jsfiddle.net/4t0nm1zt/1/
Fiddle 2: http://jsfiddle.net/4t0nm1zt/2/
Also have a look at this link for siblings , mostly part of the unique siblings of the 1st example / demo, notice how it says 7 and not 11.
Hope it helps
source to share
I think I figured out this problem. In another js file, I have a .click function associated with class elements .dropdown-menu
that overrides my new click function. See the following code:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$('.dropdown-link').click(function(e) {
toggleDropdown(e, '#' + $(this).attr('menu'));
});
I don't know why, but it didn't occur to me to just copy all my js files to jsFiddle and see which one caused the breakdown.
source to share