On click event for buttons don't have different behavior

Question

I have some PHP and HTML:

<div class="bought">
    <div class="row">
        <div class="col">
            <div class="body">
                <?php if(Request::is('user/*')) { ?>
                <div>Did you buy this for <?php echo $user->username ?>?</div>
                <div class="options">
                    <a class="boughtyes cbutton whiteonpurple">Yes</a>
                    <a class="boughtno cbutton whiteonpurple">No</a>
                </div>
                <?php } else { ?>
                <div>Bought?</div>
                <p>Click here to send hinters a message to let them know.<br />And yes, it can still be a surprise!</p>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

And some jQuery that is supposed to simply bring up a JavaScript window with no or yes based on selection:

$("#view-hint .img .bought .boughtyes").click(function() {
    window.alert("yes");
});
$("#view-hint .img .bought .boughtno").click(function() {
    window.alert("no");
});

But whether I click the yes or no button it returns 'yes':

What am I doing wrong?

EDIT:

Using chrome it looks like the elements are seperate:

EDIT2:

try shortening your jquery selectors to the element's class only, i.e. `$('.boughtyes')` and `$('.boughtno')` — Calimero, Nov 30 '15 at 20:47
[Works fine for me in this jsfiddle](http://jsfiddle.net/e7ecwene/) — Ohgodwhy, Nov 30 '15 at 20:49
It worked fine for me when I tried it... Try adjusting your javascript to @Calimero's suggestion — Nick Zuber, Nov 30 '15 at 20:49
@Calimero I shortened selectors and I am getting the same behavior — David Tunnell, Nov 30 '15 at 20:51
Are you sure the "yes" button doesn't overlap the the "no" button in CSS? Instead of `window.alert("yes");` put `window.alert($(this).attr('class'));` in both `click`s to see which button you're actually clicking. — Victor Levin, Nov 30 '15 at 20:54
ok, have you checked with your dev tools the boxes for both buttons don't overlap each other somehow (causing the click event on the first to be fired even when you click on the second) ? Another potentially useful test is to try clicking on other locations around the buttons and see what happens then. — Calimero, Nov 30 '15 at 20:54
I added a pic showing the buttons, it doesn't look like they are overlapping to me. — David Tunnell, Nov 30 '15 at 21:00
Yeah, but they BOTH have the same class `.buttonyes` ! Where is your `.buttonno` ?!!!! — Victor Levin, Nov 30 '15 at 21:00
@zealander Well that must be the issue! However, I don't understand why as my php file does in fact have buttonno used as a class. 2nd edit shows. — David Tunnell, Nov 30 '15 at 21:06
@DavidTunnell Try using Ctrl+Shift+R or clear cache? Also restart your server and check? — Praveen Kumar Purushothaman, Nov 30 '15 at 21:10
Are you sure there is no additional jQuery code that perhaps switches classes on the fly? The code you have shown would not produce this weirdness. — Victor Levin, Nov 30 '15 at 21:11
As an aside, `boughtyes` and `boughtno` are both types of _"bought"_ buttons, so the `bought` class makes sense, but the yes and no buttons are specific buttons, not a _type_ of button, so `class="cbutton" id="boughtyes"` would make more sense. — Stephen P, Nov 30 '15 at 21:12

score 2 · Accepted Answer · edited May 23 '17 at 10:27

Both the a buttons have the same class:

Please correct them. That's the reason the .boughtno is not at all applied. See that they both have class="boughtyes". Seeing your code, it is correct, which means, you need to hard refresh. Try using Ctrl+Shift+R or clear cache.

If you are using a framework like Laravel or Cake, please try restarting and compiling the assets again and try. I have used vagrant. For these I generally use:

vagrant reload --provision

Some info: Laravel 5 clear views cache

On click event for buttons don't have different behavior

1 Answers1