Fire button click event when there are multiple classes on an element

Question

How would I fire a button click event when a particular button is pressed (in this case the accept button).

I've tried the following but with little success:

Javascript

$('.notification-expand .Request .active-item > .accept-button').click(function () {
    alert("hello");
});

HTML

<div class="notification-expand Request active-item" style="display: block;">
    <div class="notification-body"></div>
    <br>
    <p>
        <button type="button" class="btn btn-success accept-button btn-sm">Accept</button>
    </p>
    <div class="row">
        <div class="col-xs-6 expand-col">
            <button type="button" class="btn btn-warning barter-button btn-sm">Barter</button>
        </div>
        <div class="col-xs-6 expand-col">
            <button type="button" class="btn btn-danger reject-button btn-sm">Reject</button>
        </div>
    </div>
</div>

Fiddle here

Marek Radošinský · Accepted Answer · 2015-03-08 13:34:58Z

4

You have error in your selector , it should look like this:

$('.notification-expand.Request.active-item .accept-button').click(function () {
    alert("hello");
});

answered Mar 8, 2015 at 13:34

Marek Radošinský

562 bronze badges

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

1 Comment

methuselah Over a year ago

Under the same logic would it be possible to do this:

$('.notification-expand.Request.active-item .accept-button, .notification-expand.Reject.active-item .accept-button').click(function() { 		alert("hello"); 	});

Mohamed Shaaban · Accepted Answer · 2015-03-08 13:35:37Z

2

You need to concatenate all classes without spaces to catch your target button

$('button.accept-button', '.notification-expand.Request.active-item').click(function () {
    alert("hello");
});

See the updated snippet

Notice the syntax of ".className1.className2" instead of ".className1 .className2"

answered Mar 8, 2015 at 13:35

Mohamed Shaaban

1,1896 silver badges13 bronze badges

4 Comments

methuselah Over a year ago

If I wanted to reference button.accept-button in .notification-expand.Reject.active-item, how would I go about doing it? Can it be done in the same line?

Mohamed Shaaban Over a year ago

You can use event delegation, to bind click event on .notification-expand.Reject.active-item element, and catch only the target one marked with .accept-button class updated snippet

methuselah Over a year ago

Thanks. The snippet posted doesn't show it however.

Mohamed Shaaban Over a year ago

Sorry, I saw Reject and Request the same word :) Below is the updated one snippet

Giovanni Le Grand · Accepted Answer · 2015-03-08 13:30:54Z

1

should be something like:

$('button.accept-button').click(function(){ ... });

there is really no need to go down the whole list if this is the whole code

----edit----

so when there are more items but only 1 active(i guess) then just target the active-item class:

$('div.active-item button.accept-button').click(function(){ ... });

answered Mar 8, 2015 at 13:30

Giovanni Le Grand

7847 silver badges19 bronze badges

2 Comments

methuselah Over a year ago

There are other elements, so it is necessary to tell apart the .active item from the others...

Dayan Over a year ago

Why not give that button an id?

alquist42 · Accepted Answer · 2015-03-08 13:41:29Z

1

try

$('.accept-button', $('.notification-expand.active-item')).click(function () {
    alert("hello");
});

or

$('.notification-expand.active-item')).find('.accept-button').click(function () {
    alert("hello");
});

edited Mar 8, 2015 at 13:41

answered Mar 8, 2015 at 13:36

alquist42

7491 gold badge8 silver badges21 bronze badges

Comments

Dayan · Accepted Answer · 2015-03-08 13:46:58Z

1

Just give the button an id and reference back to that.

HTML

<button id="btnSubmitData"> Ok Button </button>

JQuery Code

$('#btnSubmitData').click(function(){ ... });

You can also have multiple button Ids bind to the same event:

$('#btnAccept, #btnReject, #btnWarning').click(function () {
        alert("hello");
    });

Take a look at the updated Working Fiddle.

edited Mar 8, 2015 at 13:46

answered Mar 8, 2015 at 13:33

Dayan

8,10111 gold badges54 silver badges80 bronze badges

Collectives™ on Stack Overflow

Fire button click event when there are multiple classes on an element

5 Answers 5

1 Comment

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related