How to add onclick to a link with javascript?

Question

I am using following segment of code to add onclick to anchor tag but apparently it is not working.

var address_edit = $('.edit-user a').attr('href'));
$('.edit-user a').prop('onclick', 'Popup("address_edit","Edit","900","500");')

What I want:

This is my code on inspect element:

<div class="edit-user">
    <a href="example.com/nokidding">No kidding</a>
</div>

This is what I need it to be:

<div class="edit-user">
    <a onclick='Popup("address_edit","Edit","900","500");' href="example.com/nokidding">No kidding</a>
</div>

When there is " href " in anchor it ll be redirected to another page. So its of no use writing " onclick ". — Karthikeyan
– Karthikeyan, Commented Jul 22, 2016 at 9:24
You need show popup or to redirect ?? You cannot do the both in this page. — Karthikeyan
– Karthikeyan, Commented Jul 22, 2016 at 9:41
Your question clearly says that you wanted to add an onclick attribute to <a> using javascript. But the answers are not related to it. Can someone help me understand this please ? — KanUXD
– KanUXD, Commented Jul 22, 2016 at 9:52

eisbehr · Accepted Answer · 2016-07-22 09:41:21Z

1

Add click event like this :

$('.edit-user a').click(function(e) {
    e.preventDefault();
    Popup("address_edit","Edit","900","500");

    // I don't know if you need to redirect after popup open
    window.location.href = "example.com/nokidding";
})

edited Jul 22, 2016 at 9:41

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

answered Jul 22, 2016 at 9:24

Jax Teller

1,4772 gold badges15 silver badges25 bronze badges

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

Comments

eisbehr · Accepted Answer · 2016-07-22 09:23:03Z

0

It is not prop, it is attr, because onclick is a attribute, not a property. But I would add a click event listener with jQuery to the element and execute your action there in a callback:

$('.edit-user a').click(function(e) {
    // this stops the 'href' of the anchor from being executed
    // if you want the user to follow the 'href' after click, remove the line
    e.preventDefault();

    Popup("address_edit", "Edit", "900", "500");
});

answered Jul 22, 2016 at 9:23

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

1 Comment

innocent rock Over a year ago

thanks, it works, i didnt knew I had to dynamically bind this, very helpful community

HiDeoo · Accepted Answer · 2016-07-22 09:24:56Z

0

It's attr not prop. You can handle it like this:

$('.edit-user a').on('click', function() {
    Popup("address_edit", "Edit", "900", "500");
});

edited Jul 22, 2016 at 9:24

HiDeoo

10.6k8 gold badges51 silver badges50 bronze badges

answered Jul 22, 2016 at 9:24

Araknid

4764 silver badges10 bronze badges

Comments

Deepak Dholiyan · Accepted Answer · 2016-07-22 09:26:45Z

0

You need to use dynamic biding for this because you are creating element dynamically. Use below

$(document).on('click', '.edit-user a', function() {
Popup("address_edit", "Edit", "900", "500");
});

answered Jul 22, 2016 at 9:26

Deepak Dholiyan

1,9321 gold badge23 silver badges36 bronze badges

Comments

Tính Ngô Quang · Accepted Answer · 2016-07-22 09:35:49Z

0

Please confirm my demo :

$('.edit-user a').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    console.log(href);
    //Popup(href, "Edit", "900", "500"); //open popup
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-user">
     <a href="example.com/nokidding">No kidding</a>
 </div>

answered Jul 22, 2016 at 9:35

Tính Ngô Quang

4,6821 gold badge38 silver badges35 bronze badges

1 Comment

Tính Ngô Quang Over a year ago

I feel very happy about that

KanUXD · Accepted Answer · 2016-07-22 09:40:20Z

0

This should work :)

$(document).ready(function(e){
$(".link").attr('onclick','Popup("address_edit","Edit","900","500");');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link" href="example.com/nokidding">No kidding</a>

answered Jul 22, 2016 at 9:40

KanUXD

7075 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to add onclick to a link with javascript?

6 Answers 6

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related