javascript - How to call a function when clicking a dynamically generated link, using jQuery? - Stack Overflow

admin管理员组

文章数量:1026062

I am creating more than 1 <a href="#"></a> elements dynamically. The id attribute is also dynamically assigned. Like <a href="#" id='delete"+id+"'></a>. ID will bees like delete01, delete02, ... I want to call a function when clicking any one of these element. I just know,

$("#someId").click(this.someFunction()); 

calls the function, when the element with the ID someId clicked.

The generated HTML looks like,

<a id="delete26" href="#" class="delete">Delete</a>
<a id="delete27" href="#" class="delete">Delete</a>
<a id="delete28" href="#" class="delete">Delete</a>

The JavaScript code that generates the above html looks like,

html += "<a class='delete' href='#' id='delete"+post.id+"'>Delete</a>";

Here, my ID's were dynamically generated. So, how shall i call a function when any one of the element got clicked.

Any suggestions!!!

Thanks!

I am creating more than 1 <a href="#"></a> elements dynamically. The id attribute is also dynamically assigned. Like <a href="#" id='delete"+id+"'></a>. ID will bees like delete01, delete02, ... I want to call a function when clicking any one of these element. I just know,

$("#someId").click(this.someFunction()); 

calls the function, when the element with the ID someId clicked.

The generated HTML looks like,

<a id="delete26" href="#" class="delete">Delete</a>
<a id="delete27" href="#" class="delete">Delete</a>
<a id="delete28" href="#" class="delete">Delete</a>

The JavaScript code that generates the above html looks like,

html += "<a class='delete' href='#' id='delete"+post.id+"'>Delete</a>";

Here, my ID's were dynamically generated. So, how shall i call a function when any one of the element got clicked.

Any suggestions!!!

Thanks!

• javascript
• jquery
• html

Share Improve this question Follow asked Oct 30, 2010 at 17:04 user405398user405398

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

The nicest way to do this is with .delegate(). This function uses a feature of Javascript called "event bubbling", which means that every time an event is fired on an element (such as click, focus, blur, mouseover) it is also fired on all that element's parent elements. You can therefore use a mon ancestor element to trap all the events. The advantage of this is that you can add handlers for events that don't yet exist.

jQuery automates a lot of this for you:

$('#container').delegate('a.delete', 'click', this.someFunction);

This is very similar to live(), but in my opinion has nicer syntax and a slight performance increase.

Note that this example assumes that your links are all contained in an element with the id container.

You can use jQuery .live()

$(".delete").live("click", function() {
  // take some action
  return false;
});

And, if you want to call a named function you'd use the following. Note that I'm not using ()

$(".delete").live("click", this.someFunction)

You could use the following selector:

$('a[id^=delete]').click(function() {
    var number = this.id.match(/^delete(\d+)$/)[1];
    return false;
});

use the live method and maybe a selector as $('a.delete') i assume the content is loaded through ajax, if not then your fine with $('a.delete')

I have used this quite a lot. I don't know if it's the best solution, but try it anyways:

In your JavaScript have a function similar to this:

function doStuff(id)
{
    alert("doing things from ID: "+id);
}

Then with your hrefs do this (using '26' as example ID):

<a href="#" onclick="doStuff(26)" id="26">

It's probably crap but it works

I am creating more than 1 <a href="#"></a> elements dynamically. The id attribute is also dynamically assigned. Like <a href="#" id='delete"+id+"'></a>. ID will bees like delete01, delete02, ... I want to call a function when clicking any one of these element. I just know,

$("#someId").click(this.someFunction()); 

calls the function, when the element with the ID someId clicked.

The generated HTML looks like,

<a id="delete26" href="#" class="delete">Delete</a>
<a id="delete27" href="#" class="delete">Delete</a>
<a id="delete28" href="#" class="delete">Delete</a>

The JavaScript code that generates the above html looks like,

html += "<a class='delete' href='#' id='delete"+post.id+"'>Delete</a>";

Here, my ID's were dynamically generated. So, how shall i call a function when any one of the element got clicked.

Any suggestions!!!

Thanks!

I am creating more than 1 <a href="#"></a> elements dynamically. The id attribute is also dynamically assigned. Like <a href="#" id='delete"+id+"'></a>. ID will bees like delete01, delete02, ... I want to call a function when clicking any one of these element. I just know,

$("#someId").click(this.someFunction()); 

calls the function, when the element with the ID someId clicked.

The generated HTML looks like,

<a id="delete26" href="#" class="delete">Delete</a>
<a id="delete27" href="#" class="delete">Delete</a>
<a id="delete28" href="#" class="delete">Delete</a>

The JavaScript code that generates the above html looks like,

html += "<a class='delete' href='#' id='delete"+post.id+"'>Delete</a>";

Here, my ID's were dynamically generated. So, how shall i call a function when any one of the element got clicked.

Any suggestions!!!

Thanks!

• javascript
• jquery
• html

Share Improve this question Follow asked Oct 30, 2010 at 17:04 user405398user405398

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

The nicest way to do this is with .delegate(). This function uses a feature of Javascript called "event bubbling", which means that every time an event is fired on an element (such as click, focus, blur, mouseover) it is also fired on all that element's parent elements. You can therefore use a mon ancestor element to trap all the events. The advantage of this is that you can add handlers for events that don't yet exist.

jQuery automates a lot of this for you:

$('#container').delegate('a.delete', 'click', this.someFunction);

This is very similar to live(), but in my opinion has nicer syntax and a slight performance increase.

Note that this example assumes that your links are all contained in an element with the id container.

You can use jQuery .live()

$(".delete").live("click", function() {
  // take some action
  return false;
});

And, if you want to call a named function you'd use the following. Note that I'm not using ()

$(".delete").live("click", this.someFunction)

You could use the following selector:

$('a[id^=delete]').click(function() {
    var number = this.id.match(/^delete(\d+)$/)[1];
    return false;
});

use the live method and maybe a selector as $('a.delete') i assume the content is loaded through ajax, if not then your fine with $('a.delete')

I have used this quite a lot. I don't know if it's the best solution, but try it anyways:

In your JavaScript have a function similar to this:

function doStuff(id)
{
    alert("doing things from ID: "+id);
}

Then with your hrefs do this (using '26' as example ID):

<a href="#" onclick="doStuff(26)" id="26">

It's probably crap but it works

本文标签：