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>...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!
Share Improve this question asked Dec 24, 2015 at 12:43 AnupamAnupam 1,1783 gold badges20 silver badges33 bronze badges 6-
FYI:
nb_idis not a valid attribute – adeneo Commented Dec 24, 2015 at 12:45 -
2
Also,
$('a.manage_edit_nb[nb_id="1"]')– adeneo Commented Dec 24, 2015 at 12:46 -
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 Commented Dec 24, 2015 at 13:00 - yep nb_id is not valid! I should replace it with data-id! – Anupam Commented Dec 24, 2015 at 13:04
-
Yes, that would be great, my eyes are hurting from that
nb_-_- – zer00ne Commented Dec 24, 2015 at 13:06
4 Answers
Reset to default 5First, 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
This should work fine.
$('a.manage_edit_nb[nb_id="1"]').trigger('click');
here it is working:
https://jsfiddle/link2twenty/g0txnzfw/
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');
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;
}
});
});