How to attach an event listener to a javascript generated html tag?

Question

I would like to attach an event listener (eg 'click') to a programatically added javascript generated code (every line of a table). Usually, I would normally do that with jQuery dirty on method, but it doesn't work (seems that my selector is too much specific. I don't know any way to do this in another way...

var STD.prototype.addTableWithEvent(id, eventName, eventFunction)
{
    var ident = "webapp_table_"+ id;
    var table = angular.element("<table id=\"#"+ ident +"\"></table>");
    var line = angular.element("<tr></tr>");

    // this is the line not working
    jQuery("body").on(eventName, '#'+ ident +' tr', { std: this }, eventFunction);

    line.appendTo(table);
    this.$compile(table)(this.$scope);
    table.appendTo('body');
};

This function is then called this way:

 var std = new STD();
 std.addTable("example", "click", function() { console.log("working"); });

The table is well added to the page, but the event function is not called when I click. If I change for this :

jQuery("body").on(eventName, 'tr', { std: this }, eventFunction);

Then it's working but for every table, which is not what I want. Is there a way to do this with Angular.js or jQuery?

Thanks!

`$.on`is not _dirty_ at all. – moonwave99 Jan 22 '14 at 17:49 — moonwave99, Jan 22 '14 at 17:49
@moonwave99 Dirty as I feel dirty using it. – Julien Fouilhé Jan 23 '14 at 11:13 — Julien Fouilhé, Jan 23 '14 at 11:13

James Fair · Accepted Answer · 2014-01-23T21:31:50.210

1

Try attaching the event to the table instead of the body, and set the selector to delegate it to the <tr> elements, like so:

 table.on(eventName, 'tr', { std: this }, eventFunction);

edited Jan 23 '14 at 21:31

answered Jan 22 '14 at 17:56

James Fair

560
1
6
18

Yeah it works, thought it wouldn't as the table is also javascript generated ! :) – Julien Fouilhé Jan 23 '14 at 13:30
in fact, I had to use directly : `table.on(eventName, 'tr', { std: this }, eventFunction);` – Julien Fouilhé Jan 23 '14 at 13:36

score 0 · Answer 2 · answered Jan 22 '14 at 17:59

0

Your code:

jQuery("body").on(eventName, 'tr', { std: this }, eventFunction);

will attach an event handler to every <tr> element on your page -- all tables. To narrow it down and be more specific, just use standard css selectors to narrow your selection.

Like this:

jQuery("body").on(eventName, '#desiredTableID tr', { std: this }, eventFunction);

or

jQuery(document).on(eventName, '#desiredTableID tr', { std: this }, eventFunction);

answered Jan 22 '14 at 17:59

cssyphus

31,599
16
79
97

Look at my code, it is exactly what I am doing, and it doesn't work. – Julien Fouilhé Jan 23 '14 at 11:10
Glad you got it figured out. Honestly, I think you could also have solved it by binding to the `document` via `.on()` and specifying the precise table's `tr` that you wanted to target. However, very happy it is resolved. Generally, when you modify a DOM element (body, in your case, via the `append` method) you must then use `.on()` [against a DOM object or element higher in the hierarchy](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). Also, if all `tr` elements on entire page are triggering, then be more specific, as above. Hope you experiment with this a bit. – cssyphus Jan 23 '14 at 17:09
Yes, may be I should have been adding it to the DOM before binding the events and it would have work. – Julien Fouilhé Jan 23 '14 at 21:19

How to attach an event listener to a javascript generated html tag?

2 Answers2