how to query a css selector with an attribute name starting with '@'?

Question

I use $('div[@click="login()"]') to select

<div @click="login()"> Login </div>

but it gives

VM353:1 Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': 'div[@click="login()"]' is not a valid selector.
    at <anonymous>:1:1

what is the correct way?

@chovy if it's a regular css then it would be easy, i won't ask question here :-P — wsdzbm
– wsdzbm, Commented Dec 5, 2022 at 1:24
@fubar no, xpath is not possible because i found the xpath to the element is not fixed. that's why i tried css selector but it's not valid. if querySelector is impossible may be i have to use innerText? — wsdzbm
– wsdzbm, Commented Dec 5, 2022 at 1:27

score 1 · Accepted Answer · 2022-12-05 01:55:49Z

1

That's not valid HTML.

You commented on another answer with links to "this, this and this". Those are all questions about vue.js, a templating language that transpiles to (produces) HTML. Other templating languages include EJS, Pug, Handlebars, React, and Angular.

If you are really using vue.js in your project, you should add the vue.js tag to this question and future questions related to it.

The @click attribute is only meaningful to Vue, and it will not be present in the actual HTML on the webpage. Vue might turn it into an onclick handler, so you could try using $('div[onclick="login()"]') which might return you the element you want.

Otherwise, give your div an id too:

<div id="login-button" @click="login()"> Login </div>

And select on that id: $('#login-button')

edited Dec 5, 2022 at 1:55

answered Dec 5, 2022 at 1:29

user3310334

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

1 Comment

Kaiido Over a year ago

It's "invalid" only because <html:DIV> doesn't have a declared @click attribute, but the same would be true for the click attribute. The @ character doesn't make it invalid HTML. <my-div @click="login()"></my-div> is perfectly valid HTML (even though it won't be serializable as XML 1.0)

Collectives™ on Stack Overflow

how to query a css selector with an attribute name starting with '@'?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related