CODEWITHSUNDEEP
jqueryhtmlcss
Sherwood Botsford
Sherwood Botsford

Reputation: 1997

One button works, one doesn't in jQuery.

Two buttons are created in the original HTML code.

<div class=ex>
    <button class=showprice>Show</button>
    <button class=hideprice>Hide</button>
    <table class=hideprice>
    ... rest of table.

Here's the jquery:

$(document).ready(function () {
    $('button.showprice').click(function () {
        if ($(this).hasClass('showprice')) {
            $(this).removeClass('showprice');
            $(this).addClass('hideprice');
            $(this).siblings().removeClass('hideprice');
            $(this).siblings().addClass('showprice');
        } else {
            $(this).removeClass('hideprice');
            $(this).addClass('showprice');
            $(this).siblings().removeClass('showprice');
            $(this).siblings().addClass('hideprice');
        }
    });
});

jsfiddle link here: http://jsfiddle.net/sgbotsford/MzuE9/1/

In the example instead of show and hide, I've done red and blue so that it's clearer what's happening. In the working one they would tagged display:none and display:inherit instead.

Now what I expected to happen was that clicking on either button would cause the show and hide (red and blue) to reverse. Further, I would expect that clicking on a hide (red) button wouldn't work because it wouldn't match the button.showprice selector. What does happen is that only the first button works, it it will work when both both red and blue. If I change button.showprice to just button, then both buttons will work. It is acting as if the function doesn't pick up that the matching of buttons and selectors has changed.

I'm missing a concept here. Please enlighten me.

Upvotes: 1

Views: 99

Answers (3)

Satpal
Satpal

Reputation: 133403

Currently you are only binding to showprice button

Use

$('button.showprice, button.hideprice').click(function () {

instead of

$('button.showprice').click(function () {

DEMO

Event is binded with an identifier element. i.e. button with showprice class. After event is binded event, even if you change class event will be associated with that element.

In Example, I have removed class showprice but event is still binded. Though I add showprice to second button event will not be binded with second button

Upvotes: 2

MamaWalter
MamaWalter

Reputation: 2113

You dont need two buttons.

HTML: 

<button class="btn ">Hide</button>

JS: 

$(document).ready(function () {
    $('.btn').click(function () {
        $(this).text($(this).text() == "Hide" ? "Show" : "Hide"); 
        $(this).siblings().toggleClass('showprice hideprice');
    });
});

FIDDLE: http://jsfiddle.net/MzuE9/6/

Upvotes: 1

Dudo
Dudo

Reputation: 4169

http://jsfiddle.net/MzuE9/5/

You'll want to use .on with this. when the DOM loads, it will only play with the objects that are defined. So when you tell it to watch for click actions on button.showprice, it will only listen for clicks on the object that has that selector when the dom is loaded.

.on will listen, no matter what changes.

Upvotes: 1

Related Questions