Javascript / jquery - click() method on <a> tag or href value

Question

On a third party site I want to click on the following link to open a modal. <a data-login-modal href=/login class="link-reset">

I was thinking using the .click() method.

Yet I'm in trouble because that <a> :

• does not have ID - so I can't use $(#id).click() ;
• does not have a unique class - so I can't use $(.class).click() ;

What is the proper way to use the .click() method on the basis of the href or the <a> name (data-login-modal) ?

Answer 1

To get an element by name in jQuery:

$('[name="ElementNameHere"]').click();

Or more specifically for your requirement:

$('[name="ElementNameHere"]').click(function () {
   // do stuff
});

Example here .

Answer 2

You can use either of the following solutions:

$("a[href='your_href_link']").click(function(){
//body
})

OR

$("a[name='data-login-modal']").click(function(){
//body
})

Answer 3

$('a[href="your_href_link"]').on('click', function(e){
    e.preventDefault(); // preventing normal href!
});

Without preventDefault(), the href will also be executed!

Further, it's not a nice approach to select based on href. Not really maintainable because links are often dynamic. I suggests you to use id's, classes or data-attributes.