5

I've come to maintain a piece of javascript that downloads some JSON data from the server, builds a new table row (like $('<tr></tr')) and inserts it into the document.

The a node is, at one point created like this:

var a = $('<a class="foo" href="#"></a>');

and later, an event is bound to it like this:

a.click(function () {
  // yadda yadda

  return false;
});

The only problem is that this doesn't seem to work. Neither does binding through on() or the deprecated live(). The handler is simply "ignored", never fires and the page scrolls to the top (due to the href="#"). When binding the event, the element is already appended to DOM. Any help would be greatly appreciated.

Some contextual information that comes to mind: the element is created inside a loop iterating over the data, but that shouldn't be a problem unless javascript has some really weird stuff going on with scoping, plus everything else I try with the element works: I can change its content, styling, only the event binding doesn't work. And of course, the jQuery version, which is 1.8.3.

Jakub Lédl
  • 1,805
  • 3
  • 17
  • 26
  • 3
    Some more context would be good. Your code doesn't seem to be wrong. – Diego Nov 30 '12 at 17:39
  • Are you using the on() correctly? – VIDesignz Nov 30 '12 at 17:41
  • @Diego I edited the answer, if it helps. @VIDesignz Just like in the docs: `a.on("click", function () { ... });`. – Jakub Lédl Nov 30 '12 at 17:59
  • @JakubLédl That's not the right way to bind the click to newly created elements. See my revised answer and fiddle.. – VIDesignz Nov 30 '12 at 18:21
  • Both ways are mentioned in the docs. I cannot bind the handler globally (there are multiple elements and the callback is context-sensitive with respect to current iteration), so the only option is binding to each link separately. – Jakub Lédl Nov 30 '12 at 18:24
  • Can you give an example of how it is 'context-sensitive' ? – VIDesignz Nov 30 '12 at 18:31
  • Also, is the function within the click supposed to affect another dynamically generated element? Please expound on your question. – VIDesignz Nov 30 '12 at 18:37
  • Can we see the function you are binding? (Have you tried with some basic function like `function() { alert('a'); }`? – Diego Dec 01 '12 at 17:23

6 Answers6

6

EDITED

The .on() should be set up like this to work with dynamically created elements. Also, make sure to use Jquery version 1.8 (newest release)

Also, you need to prevent the standard action of the click if you don't want to scroll to the top.

Here is a working FIDDLE

var a = $('<a class="foo" href="#">ASD</a>');

a.appendTo($("body"));

$('body').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).after('<br/><a class="foo" href="#">ASD</a>');
});
VIDesignz
  • 4,703
  • 3
  • 25
  • 37
  • In the example the event is being binded to the dynamic generated element, not to the document at the start, so with regular binding should be ok: `$('a').on('click', function(){` – Diego Nov 30 '12 at 17:45
  • I'm not sure that is the case...hopefully the OP can elaborate. Either way, no harm in training yourself to bind events the right way! – VIDesignz Nov 30 '12 at 17:48
  • I tried `on()` more out of desperation, I suppose that regular binding *should* work, but thanks. – Jakub Lédl Nov 30 '12 at 18:04
  • @JakubLédl There is no reason it would not work this way...there must be an issue elsewhere in your script. – VIDesignz Nov 30 '12 at 18:08
3
You have various options. You can bind to the element or to the document.

BIND TO DOCUMENT:

 $(document).on("click", "a.foo", function(event){
//do stuff here 
 });

When you bind to a document, you can freely create and destroy a.foo elements and they will all respond to your function.

BIND TO ELEMENT:

$("a.foo").on("click", function(event){
//do stuff here
  });

When you bind to an element, the function is bound to all previously existing elements ONLY. So make sure you do this at the end of document load or at the end of your function.

I would recommend always binding to document!

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
Federico
  • 6,388
  • 6
  • 35
  • 43
0

Two things come to my mind:

  1. The link has no text so you are not clicking it.
  2. You aren't even appending it to the dom.

Here there is a fiddle that works with code very similar to yours.

var a = $('<a class="foo" href="#">ASD</a>');

a.click(function() {
    alert('a');
});

a.appendTo($("body"));
Diego
  • 16,436
  • 26
  • 84
  • 136
  • Thanks for the suggestions, but 1) the page scrolls to top after clicking the link and 2) I checked multiple times and unfortunately, I'm pretty sure I do. – Jakub Lédl Nov 30 '12 at 18:01
  • @JakubLédl Its scrolling to the top because you have '#' in the href. What did you think it was going to do? – VIDesignz Nov 30 '12 at 18:17
  • Yes, of course. I added that to see that it was actually *doing anything*. The click callback of course contains `event.preventDefault()` (or `return false`, doesn't really matter since the callback is not called in the first place). – Jakub Lédl Nov 30 '12 at 18:21
  • @JakubLédl So binding the click is working, just not the function within the click? – VIDesignz Nov 30 '12 at 18:32
0

You can use event delegation like so.

$('body').on('click','.foo',function(){
    alert('foo');
});

This will allow you to set the event handler before the element is present.

bluetoft
  • 5,373
  • 2
  • 23
  • 26
  • In the example the event is being binded to the dynamic generated element, not to the document at the start, so with regular binding should be ok: `$('a').on('click', function(){` – Diego Nov 30 '12 at 17:45
  • Unfortunately, I need to bind the callback to each link individually, since the callback depends on variables inside the loop that creates it. But I'd thought that's OK, since a new link is created (and appended) each time through the iteration. – Jakub Lédl Nov 30 '12 at 18:05
0

Try this:

var a = $('<a class="foo" href="#">ASD</a>');
$("body").html(a);
a.click(function() {
    alert('a');
    return false;
});
palaѕн
  • 72,112
  • 17
  • 116
  • 136
0

Try binding the function within the scope of the function where you dynamically create the element.

$('a.foo').on('click',function(event){
 //your code goes here
});
Federico
  • 6,388
  • 6
  • 35
  • 43