CODEWITHSUNDEEP
jqueryhtmleventsdartlive
martyglaubitz
martyglaubitz

Reputation: 1002

Dart Html: add Event Handlers to objects which yet not exists

In jQuery i can add Event Handlers to Elements which yet not exist but are later added via something like this:

$(window).on('click', '.record-todo .icon-remove', function() {
    $(this).remove();
});

I didn't found anything like that in the Html Library of Dart

Upvotes: 1

Views: 614

Answers (1)

Shailen Tuli
Shailen Tuli

Reputation: 14171

You should bind to a click event to body, and then query the target properly of the event. That will yield the element that was the target. Here is a working example. First, the html file:

<!DOCTYPE html>

<html>
  <body>
    <p id='text'>This is a para</p>
    <script type="application/dart" src='webscratch.dart'></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

And the Dart file:

import 'dart:html';

void main() {
  document.body.onClick.listen((MouseEvent event){
    window.console.log(event.currentTarget);
    window.console.log(event.target);
    var div = new DivElement();
    div.text = 'New div element content';
    document.body.children.add(div);
  });
}

When you first click on the <p>, the event target will be a ParagraphElement and the targetEvent will be a BodyElement. Clicking the <p> generates a new div. Clicking on that div makes that the event target.

Upvotes: 4

Related Questions