1

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 becomes 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!

Improve this question

5 Answers 5

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 common 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.

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

7 Comments

+1 I was just typing this answer. Sure seems as thought they share a common ancestor.
why do that when you could simple just type $('#container a.delete')??? feels a little overkill if imo? no? assuming it has a parent element
@Breezer Edited my answer to provide an answer for your question. Another advantage is that delegate does only one bind operation, rather than potentially dozens for normal binding, so is far quicker.
@Breezer - I think you have it backwards. Using .live() is overkill because it needs to compare the '#container a.delete' selector agains every click on the page, instead of comparing a.delete against only those clicks inside #container.
Looks like this was added in 1.4.2. Much easier than using event delegation, and faster than .live. Nice.
|
2

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)
Improve this answer

Comments

1

You could use the following selector:

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

2 Comments

Not sure why this is upvoted. OP said the markup is being added dynamically, so .live or event propogation must be used.
@ScottE, once the elements are added to the DOM you can use the .click event handler, no matter how elements were added. .live is used if you intend to recreate those elements but such scenario wasn't mentioned by the OP.
0

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

Improve this answer

Comments

0

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

Improve this answer

6 Comments

This question is tagged with jquery. No need for this obtrusive js.
@ScottE - You're right about the invalid ID in this answer, but the question is also tagged javascript and states "Any suggestions!!!". This answer would work.
Just because something works doesn't mean it's a good answer. If the OP is already using jquery then this is a bad choice.
@ScottE - I honestly don't know why this is bad. Is there some reason (other than it's not jQuery)?
Major advantages of jquery are the ability separate js functionality from the markup, and to write onobtrusive javascript. Couple of good points here smashingmagazine.com/2008/09/16/…
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.