jQuery .click function not working as expected

Question

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.

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.

        $("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=>&quot;form&quot;}" 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:

<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=>&quot;form&quot;}" 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=>&quot;form&quot;}" 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>

lmgonzalves · Accepted Answer · 2015-06-04 00:15:13Z

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.

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.

Fiddle 1: http://jsfiddle.net/4t0nm1zt/1/

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

Hope that helps

edited Jun 4, 2015 at 0:15

lmgonzalves

6,5883 gold badges24 silver badges43 bronze badges

answered Jun 3, 2015 at 23:26

jbg

4762 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Bonnell Over a year ago

I think my Angular code might be to blame. I tried implementing your suggestions, which make sense to me, but the textbox still won't appear. I copy/pasted the parts of my Angular code that are needed for the view in question into a jsFiddle and was able to reproduce the problem. Now if you click the 'Apply' button, nothing will happen.

Daniel Bonnell · Accepted Answer · 2015-06-04 19:51:08Z

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:

$('.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.

answered Jun 4, 2015 at 19:51

Daniel Bonnell

5,0279 gold badges52 silver badges92 bronze badges

2 Comments

jbg Over a year ago

that would do it, the best way to design systems and to test issues is to keep it simple, which is not always easy.

Daniel Bonnell Over a year ago

Especially when you're making modifications to a system someone else designed. It's not always clear what's going on in the background.

Collectives™ on Stack Overflow

jQuery .click function not working as expected

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related