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!

Answer 1

This should work fine.

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

here it is working:

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

Answer 2

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

Answer 3

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');

Answer 4

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;
        }
    });    
});