How to add onclick event to dynamic a href with jquery

Question

For example i have such code:

$("#total").html("Price $<span>" + value + "</span>");

And i also want to add a href button there

$("#total").html("Price $<span>" + value + "</span><a id='remove' href='#'>remove</>);

But how i may add onclick event for that a href?

UPDATE

I really like that solution:

//Create the link to remove the item beforehand, and add the onclick event handler.
var removeLink = $("<a id='remove' href='#'>remove</a>").click(function(e) {
    //Click event handler here.
});

$("#total").html("Price $<span>" + value + "</span>");  //Create the price value
$("#total").append(removeLink);  //Add the remove link.

Because there is a lot of remove links going to be on my form, but i have a question how to pass any parameters to that click function in such case?

Karl Nicoll · Accepted Answer · 2011-07-28 23:55:01Z

4

Try something like this:

//Create the link to remove the item beforehand, and add the onclick event handler.
var removeLink = $("<a id='remove' href='#'>remove</a>").click(function(e) {
    //Click event handler here.
});

$("#total").html("Price $<span>" + value + "</span>");  //Create the price value
$("#total").append(removeLink);  //Add the remove link.

It's a bit more verbose than a one liner, but it's very readable in my opinion.

In response to your comment below, if you want to pass parameters, you can do it in many ways. Since you're using Jquery, there are two main ways I can think of off the top of my head:

Method 1: Taking avantage of anonymous functions being able to access variables in outer scope

var param = 1234;                // <-- We know this value before we create the link
var removeLink = $("<a id='remove' href='#'>remove</a>").click(function(e) {
    var someVariable = param + 4321;
    alert(someVariable);        //Shows "5555" in a message box when link is clicked.
});

Method 2: Using jQuery.data

var param = 1234;                // <-- We know this value before we create the link
var removeLink = $("<a id='remove' href='#'>remove</a>").click(function(e) {
    var someVariable = jQuery.data(this, 'param') + 4321;
    alert(someVariable);        //Shows "5555" in a message box when link is clicked.
});
jQuery.data(removeLink, 'param', param);    // <-- Save the param as a Jquery data value

edited Jul 28, 2011 at 23:55

answered Jul 28, 2011 at 20:32

Karl Nicoll

16.5k3 gold badges53 silver badges65 bronze badges

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

2 Comments

Joper Over a year ago

any ideas how i can pass param to that click function ?

Karl Nicoll Over a year ago

@Joper - I've updated my answer to give two examples of how you could pass a param into the click function. There are a few different ways in which you could do it, but these are two of the most common ones when using Jquery.

Quintin Robinson · Accepted Answer · 2011-07-28 20:31:42Z

1

You can do a it a few ways, live() is one example, or..

$("#total").html("Price $<span>" + value + "</span><a id='remove' href='#'>remove</a>");
$("#remove").click(function() { /* ... */ });

or

$("#total").html("Price $<span>" + value + "</span><a id='remove' onclick='doSomething();' href='#'>remove</a>");

As well as other ways using the set assignment or chaining, etc.

answered Jul 28, 2011 at 20:31

Quintin Robinson

82.6k14 gold badges128 silver badges132 bronze badges

Comments

Paul · Accepted Answer · 2011-07-28 20:33:00Z

1

$("#total").html(
    $("Price $<span>" + value + "</span>").append(
        $("<a id='remove' href='#'>remove</a>").click(function(){
            // Click Handler
        })
    )
);

answered Jul 28, 2011 at 20:33

Paul

142k28 gold badges285 silver badges272 bronze badges

Comments

hayesgm · Accepted Answer · 2011-07-28 20:30:43Z

0

You should be able to do this by using a simple JQuery find function and click handler:

 var h = $("#total").html("<span>Price $<span>" + value + "</span><a id='remove' href='#'>remove<a/></span>");
 h.find('a').click(function() { alert('hello') });

answered Jul 28, 2011 at 20:30

hayesgm

9,2362 gold badges40 silver badges41 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-07-28 20:48:52Z

0

You can try this using chaining

$("#total").html("Price $<span>" + value + "</span><a id='remove' href='#'>remove</>).find(">a").click(function(){
   //on click code goes here
});

answered Jul 28, 2011 at 20:48

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Collectives™ on Stack Overflow

How to add onclick event to dynamic a href with jquery

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related