CODEWITHSUNDEEP
jquery
Joper
Joper

Reputation: 8219

How to add onclick event to dynamic a href with jquery

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?

Upvotes: 2

Views: 12267

Answers (5)

Karl Nicoll
Karl Nicoll

Reputation: 16439

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

Upvotes: 4

ShankarSangoli
ShankarSangoli

Reputation: 69915

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
});

Upvotes: 0

Paul
Paul

Reputation: 141917

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

Upvotes: 1

Quintin Robinson
Quintin Robinson

Reputation: 82375

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.

Upvotes: 1

hayesgm
hayesgm

Reputation: 9096

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') });

Upvotes: 0

Related Questions