CODEWITHSUNDEEP
jquery
Matias Masso
Matias Masso

Reputation: 2000

jQuery click event on :data selector

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?

Upvotes: 0

Views: 441

Answers (3)

Bharath
Bharath

Reputation: 519

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

Upvotes: 0

Dennis C
Dennis C

Reputation: 24747

There is no ":data" selector in jQuery.

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

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

Try to use Has attribute selector at this context,

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

DEMO

Upvotes: 3

Related Questions