Add on click function on anchor element

Question

I have an anchor element which does not have any class or id. I want to add a click handler to that anchor element. I tried in following way but no luck:

'<'a href="dosmthng" > do something</a>
var dosm = $('a[href^="dosmthng"]') //this works perfect it select anchor element
$(dosm).click(function() {
    alert(" click() called.");
});

The click function throws an error:

VM556763:211 Uncaught DOMException: Failed to execute 'querySelector' on 'Document'.

Is there any better approach two achieve this?

P.S I can not change the HTML code in the file.

Could you post your actual HTML and JS code? What you've provided in the question is a bit of a mess. Assuming your markup is correct, what you have works fine: https://jsfiddle.net/RoryMcCrossan/L8Lqb2qt/. Check the console for errors. — Rory McCrossan, Jun 20 '16 at 07:20
Why not `$('a[href^="dosmthng"]').on('click',function(){...});`? — Guruprasad J Rao, Jun 20 '16 at 07:20
Is there a typo in '<'a href="dosmthng" >. I see an extra (').Alsoplease check if you have included jquery. This fiddle is working https://jsfiddle.net/vasi_32/g6Lu7ywr/ — brk, Jun 20 '16 at 07:23
**[No it doesn't give error](https://jsfiddle.net/Guruprasad_Rao/x9nfLjog/1/)** — Guruprasad J Rao, Jun 20 '16 at 07:23
This line is not giving error you may be using `querySelector` somewhere in your code. — Mairaj Ahmad, Jun 20 '16 at 07:26
Looks like there's something dodgy in your html somewhere which is causing jquery not to load correctly. Please read this [mcve] (emphasis on *verifiable* which this is not) and then debug your own code by starting yourself with minimal and building it up until you get the error. — freedomn-m, Jun 20 '16 at 08:07

score 0 · Answer 1 · edited Jun 20 '16 at 18:07

0

Try this:

1)Add click event in document.ready

2) Check anchor tag and remove unnecessary quotes from html

$(document).ready(function(){
    var dosm = $('a[href^="dosmthng"]') //this works perfect it select anchor element

   $(dosm).click(function(e) {
      e.preventDefault();
      alert( " click() called." );
   });
}); // doc-ready ends

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a href="dosmthng" > do something</a>

edited Jun 20 '16 at 18:07

Guruprasad J Rao

29,410
14
101
200

answered Jun 20 '16 at 07:23

Jayesh Chitroda

4,987
13
18

If this was the problem there wouldn't be an error, the click handler just wouldn't be attached at all. – Rory McCrossan Jun 20 '16 at 07:25

score 0 · Answer 2 · answered Jun 20 '16 at 07:48

0

I see one potential issue.. you are missing a semi-colon at the end of the

var dosm = $('a[href^="dosmthng"]');

answered Jun 20 '16 at 07:48

Antero Nevarez-Lira

11
2

This is javascript, missing semi-colons have no impact. – freedomn-m Jun 20 '16 at 08:01
Hmm, oh really? Then please tell me about this.. @freedomn-m .. http://stackoverflow.com/questions/1834642/why-should-i-use-a-semicolon-after-every-function-in-javascript – Antero Nevarez-Lira Jun 20 '16 at 09:08
They may not be required in some cases, but explain the undesired results of not putting one in – Antero Nevarez-Lira Jun 20 '16 at 09:12
Not sure the relevance of that link as it's talking about function declarations, which this is not. There are ***no** undesired results* of not putting a semi-colon on this statement. It has no impact. Simply try it if you're still unconvinced. Either way, this is not a valid *answer* to this question and completely off topic. – freedomn-m Jun 20 '16 at 10:22

Add on click function on anchor element

2 Answers2