trigger click an element with a specific class and attribute

Question

I have few link elements related to a certain class and assigned row attributes to it and I'm trying to trigger click event based on the attribute value.

<a class="manage_edit_nb" nb_id="1"></a> | <a class="manage_del_nb" nb_id="1"></a>
<a class="manage_edit_nb" nb_id="2"></a> | <a class="manage_del_nb" nb_id="2"></a>
<a class="manage_edit_nb" nb_id="3"></a> | <a class="manage_del_nb" nb_id="3"></a>...

Is it possible to trigger click or any event for a certain attribute value for a certain class?

If I try something similar to

$('a[nb_id = "1"]').trigger('click');

it triggers click event for all elements irrespective of class but I failed to figure out how to put class reference in there!

Define assigned row attributes Do you want to click one anchor and trigger the other one across from it? (e.g. id='1' to id='1'), btw ids must be unique, and prepending nb_ to id just makes it invalid (i.e. does not exist, very wrong in every way) — zer00ne
– zer00ne, Commented Dec 24, 2015 at 13:00
Yes, that would be great, my eyes are hurting from that nb_ -_- — zer00ne
– zer00ne, Commented Dec 24, 2015 at 13:06

Adam Azad · Accepted Answer · 2015-12-24 12:53:01Z

5

First, the nb_id is not a valid attribute, use data-id instead. data-* attributes are allowed, and I personally like them. And, they can be accessed using $.attr('data-id') method, and their value can bee updated using $.attr('data-id', 'new value'). Going back to the question, try using below selector

$('.manage_del_nb[data-id="1"]').get(0).click();

OR

$('.manage_edit_nb[data-id="1"]').get(0).click();

Why .get(0)? Assuming that the element has been bound with .click(callback()) or .on('click'), the .trigger('click') will not do anything, so I am using .get(0) to get the DOM object which has that method to simulate the click event. Regardless of being said, you can use trigger('click') the way you're already using

answered Dec 24, 2015 at 12:53

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

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

Comments

Andrew Bone · Accepted Answer · 2015-12-24 12:56:54Z

3

This should work fine.

$('a.manage_edit_nb[nb_id="1"]').trigger('click');

here it is working:

https://jsfiddle.net/link2twenty/g0txnzfw/

edited Dec 24, 2015 at 12:56

answered Dec 24, 2015 at 12:50

Andrew Bone

7,3112 gold badges21 silver badges35 bronze badges

2 Comments

online Thomas Over a year ago

It sure does work nice, but the click event is not the same as calling trigger: Execute all handlers and behaviors attached to the matched elements for the given event type.

Andrew Bone Over a year ago

@Thomas OK I've amended it :-)

Gaurav Pandvia · Accepted Answer · 2016-02-08 06:27:32Z

2

The thing that you are trying to do by the above code is triggering a click event on both '.manage_edit_nb' and '.manage_del_nb' selector and hence the event is occuring on both. Try to be little more specific by giving the class name like

  $('a.manage_edit_nb[nb_id = "1"]').trigger('click');

edited Feb 8, 2016 at 6:27

answered Dec 24, 2015 at 12:54

Gaurav Pandvia

8158 silver badges13 bronze badges

Comments

krozaine · Accepted Answer · 2015-12-24 13:02:50Z

0

I think this is exactly what you need : First of all, change all nb_id to data-nb_id. and use the following code, needs jquery.

$(document).ready(function() {
    // Handle click event on the class required 
    $('.manage_edit_nb').click(function(){
        // Get nb_id of that particular anchor event of the class
        var nb_id= $(this).attr('data-nb_id');
        // Switch on nb_id
        switch(nb_id){
            // Handle your cases separately here
            case "1":
            alert('Case 1');break;
            case "2":
            alert('Case 2');break;
            case "3":
            alert('Case 3');break;
        }
    });    
});

answered Dec 24, 2015 at 13:02

krozaine

1,56116 silver badges22 bronze badges

Collectives™ on Stack Overflow

trigger click an element with a specific class and attribute

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related