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?

Answer 1

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