jQuery click event on :data selector

Question

I'm trying to detect click on a pagination anchor through a :data selector with no result:

<!DOCTYPE html>

<html>
<head>
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>
            <a href="#" data-pageindex="1">1</a>
        </li>
        <li>
            <a href="#" data-pageindex="2">2</a>
        </li>
        <li>
            <a href="#" data-pageindex="3">3</a>
        </li>
    </ul>


    <script type="text/javascript">
        $("a:data(pageindex)").click(function (event) {
            event.preventDefault();
            alert('anchor clicked!');
        })
    </script>
</body>
</html>

Any clues about what I am doing wrong?

:data() selector exists in jQueryUI but the thing is that it's not applicable in your case, check the docs: api.jqueryui.com/data-selector , you may opt to use Rajaprabhu Aravindasamy's answer. — Denis V
– Denis V, Commented Jun 21, 2014 at 15:55
If you still want to use your own logic (by using the :data selector), I think you have to customize your own :data selector (don't need jQuery UI), check this james.padolsey.com/javascript/… , with the .expr[':'], you can extend many selectors, not just :data. — King King
– King King, Commented Jun 21, 2014 at 15:57

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-21 15:39:44Z

3

Try to use Has attribute selector at this context,

$("a[data-pageindex]").click(function (event) {
     event.preventDefault();
     alert('anchor clicked!');
});

DEMO

answered Jun 21, 2014 at 15:39

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

Comments

Dennis C · Accepted Answer · 2014-06-21 15:40:18Z

2

There is no ":data" selector in jQuery.

http://api.jquery.com/category/selectors/

answered Jun 21, 2014 at 15:40

Dennis C

24.8k13 gold badges74 silver badges100 bronze badges

Comments

Bharath · Accepted Answer · 2014-06-21 16:49:49Z

0

This is not a valid selector. Instead use like this,

$("ul > li").each(function(){
     $(this).find("a").data();
     $(this).click(function(){
          console.log($(this).find("a").data().pageindex);
          // do your stuff
     })
});

Here's the Demo Fiddle Link

edited Jun 21, 2014 at 16:49

answered Jun 21, 2014 at 16:15

Bharath

5294 silver badges7 bronze badges

Collectives™ on Stack Overflow

jQuery click event on :data selector

3 Answers 3

DEMO

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related