jQuery function run when clicking on anchor with a specific value

Question

I would like a function to run when a specific anchor with the `value="frb" is clicked.

This is the anchor

<a href="<?php echo $l1; ?>" value="frb" class="button">Accept</a>

this is what i tried:

$('body').on('click', value[frb], function(e) {
    e.preventDefault();
});

this doesnt work, i cant find any examples that use this, is it possible?

i don't think you should use value attribute in a link element. Maybe you should use class="frb" — David Cheung
– David Cheung, Commented Jun 24, 2012 at 0:51
@DavidCheung is there a specific reason i shouldn't? The class it already uses is being used to css reasons. — JimmyBanks
– JimmyBanks, Commented Jun 24, 2012 at 0:52
I don't think that 'value' is a valid attribute on an 'a' tag. I haven't seen it used before. — David Cheung
– David Cheung, Commented Jun 24, 2012 at 0:56
you can add the class as a span. i.e. <span class="frb"><a href....></a></span> it wouldn't make your jquery anymore complicated — David Cheung
– David Cheung, Commented Jun 24, 2012 at 0:59
An a element has no value attribute, as already mentioned, but rather than repurposing the class attribute, why not simply use a custom data-* attribute? — David Thomas
– David Thomas, Commented Jun 24, 2012 at 1:22

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

value is not valid attribute to anchor tag. Instead of that you can use data-value like following:

HTML

<a href="<?php echo $l1; ?>" data-value="frb" class="button">Accept</a>

jQuery

$('body').on('click', 'a[data-value=frb]', function(e) {
    e.preventDefault(); // prevent page reload
    alert( this.href );
});

Working sample

Note:

Already @Musa mentioned about data attribute, but in his jQuery snippet used a[value=frb] which will not work.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 24, 2012 at 3:29

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

3 Comments

st-boost Over a year ago

What is the difference between $('body').on('click', 'a[data-value=frb]', fn); and $('a[data-value=frb]').on('click', fn);?

thecodeparadox Over a year ago

@st-boost first one is for delegate event bing (aka live event) and second one is ordinary binding when element already exists in dom at page load

st-boost Over a year ago

ok, thanks. Wouldn't the first method be considerably less efficient? Or does it only apply to nodes added by jQuery?

Musa · Accepted Answer · 2012-06-24 00:53:44Z

1

The second parameter of .on() should be a selector string

$('body').on('click', 'a[value=frb]', function(e) {
    e.preventDefault();
});

also a tag doesn't have a value attribute, you should use a data attribute instead

<a href="<?php echo $l1; ?>" data-value="frb" class="button">Accept</a>

answered Jun 24, 2012 at 0:53

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Comments

hofnarwillie · Accepted Answer · 2012-06-24 00:49:30Z

0

try this:

$(function(){
    $('a[value=frb]').click(function(e) {
        e.preventDefault();
    });
});

It assigns the function to all anchors with the specified 'value' attribute.

answered Jun 24, 2012 at 0:49

hofnarwillie

3,65010 gold badges54 silver badges77 bronze badges

Comments

Tats_innit · Accepted Answer · 2012-06-24 01:22:09Z

0

working demo http://jsfiddle.net/KQy36/

OR http://jsfiddle.net/WP7JS/

API: http://api.jquery.com/on/

Oh by the way: http://www.w3schools.com/tags/tag_a.asp (To see valid a tag attribute)

Anyhoo, Hope this helps,

code

$('a[value="frb"]').on('click', function(e) {
    alert('yeah wha?');
    e.preventDefault();
});

OR apart of another post below mine. :)

$('a').on('click', function(e) {

    if ($(this).attr("value") === "frb") {
        alert('yeah wha? I am frb');
        e.preventDefault();
    } else {

        alert('not frb');
        e.preventDefault();
    }

});

edited Jun 24, 2012 at 1:22

answered Jun 24, 2012 at 0:50

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Comments

David Cheung · Accepted Answer · 2012-06-24 02:47:11Z

0

Since there is no value attribute for the link tag we need to make a change to the html:

<span class="frb"><a href="<?php echo $l1; ?>" class="button">Accept</a></span>

Then add this to register the click event.

$(document).ready(function(){
  $('span.frb').click(function(e) {
    e.preventDefault();
  });
});

answered Jun 24, 2012 at 2:47

David Cheung

8584 silver badges8 bronze badges

Collectives™ on Stack Overflow

jQuery function run when clicking on anchor with a specific value

5 Answers 5

Note:

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Note:

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related