Working with Events, part 2

read 47 comments

In my last article, I described the common problem of events seemingly ceasing to work for new elements added to a document, whether by some form of ajax or by DOM modification. We examined one way to overcome the problem: Event Delegation. With event delegation, we bind the event handler to a containing element that remains in the DOM and then check for the target of the event.

Cloning Nodes

This time, we'll take a look at re-binding event handlers. But before we do, I should mention that, as of jQuery version 1.2, event handlers can be cloned along with elements. Consider this unordered list:

  1. <ul id="list3" class="eventlist">
  2.   <li>plain</li>
  3.   <li class="special">special <button>I am special</button></li>
  4.   <li>plain</li>
  5. </ul>

We can make a copy of <li class="special"> and insert it after the original, while at the same time retaining any event handlers that were attached within the original. The plain .clone() method doesn't work that way; instead, it just copies the element:

Continue Reading Below
  1. $(document).ready(function() {
  2.   $('#list3 li.special button').click(function() {
  3.     var $parent = $(this).parent();
  4.     $parent.clone().insertAfter($parent);
  5.   });
  6. });

Try it:
  • plain
  • special
  • plain

As you can see, the original button is able to keep creating new list items, but the buttons inside the "dynamically generated" list items can't create new ones.

To get the event handlers copied over as well, all we have to do is pass in true to the method's single argument:

  1. $(document).ready(function() {
  2.   $('#list4 li.special button').click(function() {
  3.     var $parent = $(this).parent();
  4.     $parent.clone(true).append(' I\'m a clone!').insertAfter($parent);
  5.   });
  6. });

Note: I've added .append(' I\'m a clone!') here only as visual reinforcement of what is going on.

Try it now:

  • plain
  • special
  • plain

Using .clone(true) is great when we want to make a copy of existing elements and their event handlers, but there are plenty of other situations that don't involve cloning in which we might want event handlers to persist.

Re-binding Basics

The basic concept behind re-binding is fairly straightforward: We create a function that binds the handlers and then call it whenever new elements are introduced. For example, with our unordered list above, we first create a function called addItem that registers the click handler, which in turn will add a new item:

  1. function addItem() {
  2.   $('#list5 li.special button').click(function() {
  3.     var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  4.     $(this).parent().after($newLi);
  5.   });  
  6. }

Next, we call that function when the DOM initially loads:

  1. $(document).ready(function() {
  2.   addItem();
  3. });

Finally, we can call the function inside the click handler—and inside itself. That way, it will bind the event handlers to the new list item as well.

We'll add one more click handler to the button, but this one will not be re-bound, so that we can see the difference.

Here is what the code for buttons in #list5 looks like, all together:

  1. function addItem() {
  2.   $('#list5 li.special button').click(function() {
  3.     var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  4.     $(this).parent().after($newLi);
  5.     addItem();
  6.   });
  7. }
  9. $(document).ready(function() {
  10.   addItem();
  12.   // non-rebinding click handler ...
  13.   $('#list5 li.special button').click(function() {
  14.     $(this).after(' pressed');
  15.   });
  16. });

Try this one out:

  • plain
  • special
  • plain

We can see that "pressed" is appended to the first list item each time it is clicked, but it is not appended to any of the list items created by our clicks. On the other hand, the created buttons are able to generate further list items because that function is being rebound.

However, what we've just done produces unwelcome results if we click on a button more than once. The click handler is bound again with each click of a button, producing a multiplier effect. The first click of a button creates one extra list item; the second creates two; the third, four; and so on.

Unbind, then Bind

To avoid the multiple binding, we can unbind first and then re-bind. So in line 2, instead of this ...

$('#list5 li.special button').click(function() {

... we'll have this ...

$('#list6 li.special button').unbind('click').bind('click', function() {

Note the use of .bind() here. This is the universal event binder that jQuery uses. All the others, such as .click(), .blur(), .resize(), and so on, are shorthand methods for their .bind('event') equivalent.

The complete new code, again with the additional non-rebinding click handler for contrast, looks like this:

  1. function addItemUnbind() {
  2.   $('#list6 li.special button')
  3.     .unbind('click')
  4.     .bind('click', function() {
  5.       var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  6.       $(this).parent().after($newLi);
  7.       addItemUnbind();
  8.   });
  9. }
  10. $(document).ready(function() {
  11.   addItemUnbind();
  13.   // non-rebinding click handler
  14.   $('#list6 li.special button').click(function() {
  15.     $(this).after(' pressed');
  16.   });
  17. });

See how this one works:

  • plain
  • special
  • plain

Unfortunately, our attempt to unbind the addItemUnbind() function went too far, unbinding the "non-rebinding" click handler as well, before it even had a chance to run once (it's evident because there is no "pressed" text after the "I am special" button here). Clearly, we're going to have to be more careful about what we're unbinding.

Event Namespacing

One way to avoid the over-reaching event unbinding is to apply a "namespace" to the click event for both binding and unbinding. So, instead of .bind('click') and .unbind('click), we'll have, for example, .bind('click.addit') and .unbind('click.addit). Here is one last code sample, which looks identical to the previous, except that it now has the namespaced event (and the list id is list7):

  1. function addItemNS() {
  2.   $('#list7 li.special button')
  3.     .unbind('click.addit')
  4.     .bind('click.addit', function() {
  5.       var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  6.       $(this).parent().after($newLi);
  7.       addItemNS();
  8.   });
  9. }
  10. $(document).ready(function() {
  11.   addItemNS();
  13.   // non-rebinding click handler
  14.   $('#list7 li.special button').click(function() {
  15.     $(this).after(' pressed');
  16.   });
  17. });

We should now — finally! — have a set of behaviors attached to these buttons that act the way we intend them to:

  • plain
  • special
  • plain

For more information about event namespacing, read Brandon Aaron's article, Namespace Your Events.

Bonus: Unbind by Function Reference

If you've made it this far, then you must have extraordinary patience, in which case I'll reward it with one final method of rebinding. Rather than namespace the events, we can reference the function in the second argument of the .bind() and .unbind() methods. We have to shuffle things around a bit to avoid "too much recursion," but it'll do just fine like so:

  1. function addItemFinal() {
  2.     var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  3.     $(this).parent().after($newLi);
  4.     $('#list8 li.special button')
  5.       .unbind('click', addItemFinal)
  6.       .bind('click', addItemFinal);
  7. }
  9. $(document).ready(function() {
  10. $('#list8 li.special button').bind('click', addItemFinal);
  12.   // non-rebinding click handler
  13.   $('#list8 li.special button').click(function() {
  14.     $(this).after(' pressed');
  15.   });
  16. });

Note here that there are no parentheses after "addItemFinal" when it appears inside the bind/unbind, because we are referencing the function, not calling it. So let's test it out one last time:

  • plain
  • special
  • plain

Plugin Options

There are three great plugins that can do a lot of this work for us:

If this entry left you bewildered, or if you want a quick, well tested solution, you should definitely try one of them. Each works a little differently, but they're all super plugins.

Update: Event Namespacing with Add and Remove

In response to the comment by Nick Johns below, I'm providing an example that allows for both adding a row and removing a row. The code is based on the "Event Namespacing" example above:

  1. function addRemoveItemNS() {
  2.   var $newLi = $('<li class="special">special and new <button class="addone">I am new</button> <button class="removeme">remove me</button></li>');
  4. $('#list9 li.special')
  5.   .find('button.addone')
  6.     .unbind('click.addit')
  7.     .bind('click.addit', function() {
  8.       $(this).parent().after($newLi);
  9.       addRemoveItemNS();
  10.   })
  11.   .end()
  12.   .find('button.removeme')
  13.   .unbind('click.removeit')
  14.   .bind('click.removeit', function() {
  15.     $(this).parent().remove();
  16.   });
  17. }
  19. $(document).ready(function() {
  20.   addRemoveItemNS();
  21. });

I added an "addone" class to the initial button, but otherwise the list is the same as the others. You can try it out here:

  • plain
  • special
  • plain

comment feed


  1. Till


    you really put something into this article. thanks.
    to avoid the double-binding of events, why dont we just "tag" the elements that already got the event attached

    function addEvent() {
    					$(this).click(function(){	/*/ Our Eventhanderl /*/	});
    				this.hasEventHander = true;

    maybe faster than unbinding/rebinding *all* events.
    of course we still have to call addEvent() when needed:-/...


  2. Hi Till,
    Yes, tagging elements that have the event already bound is a great way to avoid the multiple binding problem. Thanks for the suggestion!

  3. First off, I'm starting to seriously look at jQuery as a tool for everyday scripting needs, and this site is a great way of showcasing the value of this library. Thank you!

    Second off, I'm writing because I primarily use Safari (3.1.1) for the Mac (OS X 10.5.3) and the .clone(true) example didn't work. The cloning part worked, but the event binding did not. I tested this in Firefox also, and everything worked fine, so I know it's not a problem with your code but, rather, with Safari.

  4. jamesanthony

    $(document).ready(function() {
    $('#list4 li.special button').click(function() {
    var $parent = $(this).parent();
    $parent.clone().append(' I\'m a clone!').insertAfter($parent);

  5. My AJAX call is updating DOM of the upload form by creating one additional input box which I need to submit along with values of other controls existing in the DOM prior to AJAX call.

    However, this is not the case. Although I can see the value of the new element, it does not get posted. The workaround I am using is to copy the value of this element on submit to another, hidden, existing prior to AJAX call, and retrieve that value after submitting. Is there a way that I make the form aware that it should post the value of the new element created by AJAX?

  6. Simon

    Great article, thanks!

  7. Franco

    What is my problem
    I´m using this code inside an javascript function
    and i need to press the button where i caal this function twice to make my php the code run

    function GetData(_url, n){

    $("#res p").load("salvar_lista.php"+_url+"&lista=lista"+n);

  8. Tahir

    Hello Karl.
    I have one question about this bind & unbind.
    If we take a line of your code as an example.

    var $newLi = $('<li>special and new I am new</li>');

    Here after insertion I don't want to perform the old functionality. Lets say on this button's click Event i want an alert. How is that possible.....
    Please Explain.....soon
    I changed the id of button and onClick call an alert("ABC"); but invan. (Even remove all unnecessary ids etc..)

  9. Hi Tahir,

    You simply bind the click event to the new <li> after insertion. An easy way to do this is to start with $newLi and use .insertAfter() rather than .after(). Here is a simplified example:

        $(document).ready(function() {
          var $newLi = $('<li>special and new <button>I am new</button></li>');
          $('li button').click(function() {
            var $parent = $(this).parent();
            $newLi.insertAfter($parent).find('button').click(function() {

    That should allow the newly created button to produce an alert when clicked.

  10. Tahir

    Thanks Karl.
    You really gave me great reply.
    Ok. I have a question in jquery documentation it is said that .bind will bind every matched element on the document. but with .bind this statement does not feel true. I copy and paste list <ul> and it work on first one fine but on second list it does not respond. Even i copy the code from and and apply the same practice. is there any problem or modification of code required is it possible without changing the #id of 2nd <ul> and then bind is again.

  11. Hi Tahir,
    I'm not sure I follow your question. Are you using the same ID for more than one <ul>? If so, that will cause problems. If you could post a test page that exhibits the problem you're having, I'll have a better chance of detecting the problem

  12. I hope the question is relative: Suppose I have a page that is loaded once and anything on it gets done through AJAX. I have a "main" div which is updated through an ajax call when a click is made.

    For example, at the beginning main contains some anchors with class="alert" which bind an alert to click(). At some point in time, main is replaced by some new HTML (from an AJAX call) so there are no more anchors with class="alert".

    The question is: Are the initially bound handlers also cleared along with the removed elements? Do I have to unbind everything before an AJAX call replaces html with bound handlers to avoid memory leaks?

  13. Tahir

    Sorry for my delay I was busy in other things.

    function addItemFinal() {
    	var $newLi = $('
  14. special and new I am new
  15. '); $(this).parent().after($newLi); $('#list8 li.special button') .unbind('click', addItemFinal) .bind('click', addItemFinal); } $(document).ready(function() { $('#list8 li.special button').bind('click', addItemFinal); // non-rebinding click handler $('#list8 li.special button').click(function() { $(this).after(' pressed'); }); });
  16. Tahir

    Sorry for my delay I was busy in other things.

    function addItemFinal() {
    	var $newLi = $(' <li class="special" >special and new  <button >I am new </button > </li >');
    	$('#list8 li.special button')
    	  .unbind('click', addItemFinal)
    	  .bind('click', addItemFinal);
    $(document).ready(function() {
    $('#list8 li.special button').bind('click', addItemFinal);
      // non-rebinding click handler
      $('#list8 li.special button').click(function() {
    	$(this).after(' pressed');

    Ok Here is my question.
    if there is a list like in the document.
    $('#list8 li.special button').bind('click', addItemFinal);
    and after that there is another list with the same name and both loaded at the same time. It apply the effect on first one. but does not work on the second one Why. I resolved it like this
    $('#list8 li.special button').bind('click', addItemFinal);
    $('#list9 li.special button').bind('click', addItemFinal);

    while it should work like this.
    $('#list8 li.special button').bind('click', addItemFinal);

    As it is said that Effect is applied to all the DOM elements as with the same reference.
    I tested other sort of things with the same concept like changing colors etc those thing works fine (not in this example).

  17. Hello there,

    Regarding Bind/unbind this article bring me more confusion than what it solves.

    Why do you use Append methods (addItemFinal, .append, etc,etc) when you can explain it more generally with, after you load your external data, just type the bind method again, period!

    Example :

    function actualizarLinks() 
       $.get("index.php", { page: "links" , returnType: "html", ajax:"1" }, function(data){ 
    					 $('#refreshLinks').bind('click', actualizarLinks);	
    $('#refreshLinks').bind('click', actualizarLinks);


    The last line simply binds the click button of #refreshLinks to the function actualizarLinks for the function to called.

    Inside the function, we call request the page with ajax, and update our #links with the data returned, then, we just rebind (bind again), the click method of #refreshLinks to the actualizarLinks function.

    Hope this clears any future confusion, like the one i had.

  18. Marc Davenport

    Great posts Karl! I'm still new to jQuery, but it is coming along quick. One thing I'm still not equipped to do is make the decision between event delegation and re-binding. Event Delegation seems to have great performance characteristics but ties you to a couple specific named elements. Re-binding would allow you to make completely dynamic nests of divs. Is there one you prefer?

    I have a situation where I'll be adding several divs that I want to have a certain behavior. Rather than go through re-binding them, I was thinking of creating a hidden div that has all the behavior bound to it, and then when I need to "add" the div, I'll just use clone(true) on the hidden div and change the id and remove my "hidden" class. This way I don't have to spend much time worrying about rebinding. Does this approach have merit, or is there a drawback that I'm not considering?

  19. For Re-binding Basics, I tried the example on this page, but got a problem about producing a multiplier effect. To be better presenting my problem, I cut this example to a new page:

    I would appreciate it if someone can help me out. (

    Happy Thanksgiving!

  20. Hi Adam,

    You need to keep reading this entry all the way through the end, or at least through the section called "Unbind, then Rebind" . It looks like the code you copied comes from the example halfway through the entry.

  21. Hi Karl!

    Thank you for the quick response. I did understand "Unbind, then Rebind" would fix the problem of producing a multiplier effect, but my question was that I do know understand the behavior of producing a multiplier effect, (e.g. why in some circumstance, when you click the last button of 'I am new', it produces 3 new buttons instead of one?)
    Please see the example at, you may know what I was talking about. Sorry for the confusion!

    Thanks again!

  22. Q

    Well, this seems to be nice and dandy but what if the incoming AJAX based html is not known but contains accordions, thinkboxes, etc, etc.

    Is there a generic way of doing this ?

    For example I have few areas on the page that bring html via various mechanisms from a remote location - mainly AJAX. I have no idea how the data would look but it may have accordions, tabs, modal boxes(thickbox) - how do I rebind those ?

    Calling the document.ready wouldn't do it because the areas that don't refresh are going to bind again creating a nightmare. Ideally would be nice to rebind only the newly refreshed element(divs)

    Is there a way to achieve this ?

  23. Nick Johns

    How would you add a second button to REMOVE the line? There are loads of examples of inserting lines but what about removing? thank you for your help.

  24. Hi Nick,

    Excellent question! I've updated the post to show an example of adding and removing items.

  25. Raine

    Hi Karl,

    I'm trying to figure out how to apply this in a plugin:


    And inside the plugin I tried:
    (function($) {
    // plugin definition

    $.fn.(function($) {
    // plugin definition

    $.fn.zencart = function(options) {= function(options) {
    $this = this;
    $this.find('form').livequery(function() {


    This doesn't work (I guess because find() return jquery object). I wonder if there is a way to do this.


    • Raine

      I made a mistake in the code above btw, the plugin is temporarily named 'zencart's since im writing it for that specific software, and I forgot to rename 1 line when I posted the code above.



  26. Karl,
    How do you control what order event handlers are triggered?
    Is it FILO or FIFO order?
    If it is FIFO, how can I add an event hander that gets executed before the rest?

    // do normal form submit validation etc...
            //do something with the form before it gets submitted

    Is there a way to ensure that either the handler attached by the button gets triggered first, or the one attached to the form gets triggered last?
    I'm guessing that I'd need to do a unbind/bind in there somewhere.

  27. Jay

    A couple of these examples cause IE6 to go into an infinite loop

  28. bart

    Good article Karl, thanks for posting :) I like how you illustrate problems visually instead of talking about foo and bar for example.

    I have a question on unbinding by function reference. In your example you're using this expression;

    $('#list8 li.special button').bind('click', addItemFinal);

    addItemFinal is passed here as a reference but what if I'd want to pass the function some variables? Let's say#list8 li.special button has an id I'd want to use in the function to do some further processing on? How would that the code?

    • Hi Bart,

      You would use an anonymous function for the callback, in that case:
      $('#list8 li.special button').bind('click', function() {

  29. Shaaa

    how do i achieve similar events, for similar controls with same ID?

    just like following,

      		border:1px red dotted;
    		padding:10px 0 0 10px;
      		border:1px blue dotted;		
    		margin:0px 0 0 10px;
  30. Greg

    erm.. using IE7, clicking the 'I AM Special' button results in IE locking up momentarily and then presenting the 'long running script' dialog. Upon closing that (stopping the script) we get a list of say 50-60 or so buttons.

    Not that the article isn't worthwhile mind you.

  31. ravi

    Thank you for the above detailed blog post. I have been facing performance issues with my jQuery app which uses a table with 100s of cells containing in total 1000s of form elements. The elements are inserted dynamically (using a template row) and I use livequery() to attach event handlers to them. When the table gets beyond 200 rows, it becomes unusable. Running a profiler shows that 60+% of CPU time is spent on livequery() related work.

    On reading your post, I had first thought that I might benefit from replacing the livequery() with attaching all the handlers to my template row and then using clone(true). But based on your recommendation of livequery() as one way to accomplish a similar result, I am guessing the clone(true) will be of not much help.

    Perhaps the issue is just the fact that there are 1000s of elements with handlers attached to them (irrespective of whether that is via clone(true) or livequery()). Do you think that is the case? If so, I have the Event Delegation option as a last resort.

    (any comments appreciated)

    • Hi ravi,
      Yes, the issue is that there are 1000s of elements being bound with event handlers. Event delegation is definitely the way to go in that case.

  32. Awesome explanation! Love the examples, read through the whole article and comments, but I still can't seem to get it work with my example.

    I'm trying to implement the add/remove functionality to a table. I'm creating sort of contact form. Here is a quick and simple example.

    So basically I need the button to generate a whole new table row. Any ideas? Appreciate all comments, thank you in advanced!

  33. Mark

    Hi karl,

    I got a question for you im trying to vind the correct syntax of a combination between and http request.

    I got 3 drop down menu's(week, month and year) where the values got to be posted to the handler .php by a
    But i can't vind any where the sintax or an explanation can you give me any hints or tips about this?
    thank you in advanced Mark

    • Hi Mark,
      I'd put the three select elements and the submit button in a form. Make sure it works without JavaScript first. Then, use the form submit event rather than the button's click event to post it via ajax. Something like this:

        $('#myForm').submit(function() {
          var myData = $(this).serialize();
          $.post('handler.php', myData, function() {
            // do something after post success
          return false;
  34. Karl,

    Thanks so much for this post as it saved me a lot of time and shaked to stop thinking about a silly idea (I was thinking it was the style="opacity" added automatically via jQuery which prevents the usge of new items, silly me :), I was stuck with that idea.)

  35. Hi Karl,

    Great post. Absolutely enlightening and helpful. I've followed most of what you've written in this and the previous post and tried some of it. Here's where I'm getting stuck:

    I have specific target DIVs (let's call it DTarget) that a user can drop something onto. When they drop something onto it the code adds a new DIV with the thing's name right after the target (call it DName) and it adds another DTarget following the new DName. So it ends up looking like:


    The last DTarget is dynamically added so it doesn't know that it can accept a drop of a DName on it. Making something a droppable target isn't an event, it's an attribute of the .droppable method. How do I bind that attribute to the new DTarget?

    Thanks, if you get a chance to answer this and thanks in any case. These two posts were still very valuable.


        accept: ".DName", 
        drop: function(event, ui) {
            $(this).after('<div class="DName">'  +  things name gotten elsewhere  +  '</div>');
            <!-- Tried the clone(true) option here, it copied the element but it wasn't droppable ??? -->
  36. Dakota

    Hi Karl, Is the .live() method in 1.3ish just an alias for .clone(true), or does it do other stuff as well?

    • Hi Dakota,
      .live() is completely different from .clone(true). The .live() method sets up an event handler that "listens" for some kind of action to take place (such as a click) at which point the handler is triggered. The .clone(true) method makes a copy of elements specified by whatever is in the jQuery set at the time ( for example, all divs, if you do $('div').clone(true) ). By passing in true, it also copies events and data that are associated with those elements.

      Hope that makes sense.

  37. I was actually trying to bind a click even to the link tag generated from a php file(via jquery ajax call) which itself was called by the click event of a button on the home page, so after the php generated content(the link) asynchronously, the click event bound to the link didn't work, but my prob was solved by merely calling my jquery script again in the called php..

    ...I doubt if I make any sense above :P

  38. Thanks so much for this post as it saved me a lot of time and shaked to stop thinking about a silly idea

  39. Seb

    Joao Carlos - buddy - you've saved my life - I've been looking for this kind of solution for bloody hours! Many thanks to everyone here - great contribution!

  40. Sam


    My AJAX returns several different divs and I don't know what the ID will be. For example:

    <div id="div245"></div>
    <div id="div225"></div>
    <div id="div25"></div>

    How can I bind these when I don't know what the DIV ID will be?


  41. Chris

    Hi all,

    I'm new to JQuery/AJAX and having a tough time understanding how to rebind my onclick event handler.

    My page is basically a results page with pagination. The page number links appear in a div called 'pagination' and the results appear in a div called 'results'.

    I use JQuery to cycle through each href anchor in the pagination div and attach an onclick event handler to each. Clicking on an anchor in the pagination fires an ajax load to update the results.

    Here is my code:

    $('#pagination div a').each(function(i,item){
       var offsetNo = $(this).attr('href').replace('', '');
       $('#results').load('results.php?'+offsetNo, function() {
          //call back if needed
       return false;

    This works only the once. After the ajax update of 'results', the binding is lost. How can I change my code to fix this?
    P.S. I've tried the 3 plugins mentioned about, but had no luck with them, so I thought it best to find a solution without them, which might better help me understand how it works.

  42. Renso

    Great article!

    I have 1000s of events on some pages, lots of them invoke ajax calls, spreadsheet like functionality. I zoom-in and out of "product" to ser their ajax retrieved details (ASP.Net ascx file returned). I rebind my events when appending the new details to the DOM. I use .Empty() to clear the details when "zooming-out". Would resources leak without explicitly destroying events?

10 Pings

  1. Learning jQuery » Working with Events, part 2...

    Learning jQuery » Working with Events, part 2...

  2. [...] were. Turns out that jQuery has a mechanism where you can namespace your events. Here is another writeup about it. Nice [...]

  3. [...] part 2 of this tutorial, we'll look at how to get events to carry over to newly created elements through [...]

  4. Webitect

    [...] 21. Working with Events: Part 2 [...]

  5. Frequently Asked Questions,Jquery working, | GUI Developer

    [...] learn more about event re-binding read this article on the Learning jQuery [...]

  6. [...] 原文地址: 原文作者:  Karl Swedberg [...]

  7. [...] been reading learningjquery and messing with livequery plugin, but no avail. I understand the problem, just not able to solve [...]

  8. [...] been reading learningjquery and messing with livequery plugin, but no avail. I understand the problem, just not able to solve [...]

Sorry, but comments for this entry are now closed.